# How to Create a Code Page in Quickbase

June 24, 2019

One of the most useful tools for creating a robust Quickbase application is a **Code Page**. This Page Type allows you to create markup documents using HTML, JavaScript, CSS, or XML.

This functionality is definitely more pro-code than low-code. However, it’s a great place to begin expanding your Quickbase creativity. Plus, there are plenty of tutorials out there to get you started, including this one.

## Sample Use Cases:

Code pages can be used to accomplish just about anything you can imagine (and write!). Here are some ideas to get you started:

✓ Dynamically generated invoices or other documents.  
✓ [**Data import interfaces**](/content/knowledge-base/outside-of-the-quickbase-box/how-to-implement-a-custom-import-in-quickbase/index.html) with customized user experience and error checking.  
✓ Automated processes beyond the limits of Actions and Automations.  
✓ Enhanced mapping functionality with Google Maps. [**See more here!**](/content/knowledge-base/outside-of-the-quickbase-box/how-to-use-google-maps-for-data-visualization/index.html)

## The Quickbase side of creating a Code Page:

This example will demonstrate how to create a new Code Page and allow users to access it via a button on their Home Page.

The rest of the code is up to you!

1. From your Home Page, navigate to **Settings > Pages** and click **\+ New Page**.  
2. Select **Code Page** and click **Create**.

1. Enter a **PAGE NAME**, paste your code in the text area below, and click **Save**. You can also write your code directly in the input. However, I’m going to assume you’re using a text editor ( _please be using a text editor, if not_ [**_VSCode_**](https://code.visualstudio.com/) _is highly recommend and free!).

1. Buttons are the most common way to access a Code Page. Add a new button on your Home Page by selecting **Customize this Page** and selecting your **PAGE NAME** from the **Page** tab property.

1. After saving your page, test the button by clicking it. Congratulations, you’ve successfully created your first Code Page!

EDITORS NOTE: You are not limited to Home Page buttons when linking to a Code Page. You can use any table URL buttons and also pass in record-specific parameters!

Check out our articles on [**Implementing Custom Imports**](/content/knowledge-base/outside-of-the-quickbase-box/how-to-implement-a-custom-import-in-quickbase/index.html) and [**Google Maps for Data Visualization**](/content/knowledge-base/outside-of-the-quickbase-box/how-to-use-google-maps-for-data-visualization/index.html) to get an idea of how Code Pages can be used to create a more powerful user experience.

To get started with HTML/CSS check out this free introduction at [**Khan Academy**](https://www.khanacademy.org/computing/computer-programming/html-css), and download [**VSCode**](https://code.visualstudio.com/) to begin writing code.

- Author: [QCG Development Team](/content/author/qcg-development-team/index.html)
- Email: [dev@quandarycg.com](mailto:dev@quandarycg.com)
- Date Submitted: 2/11/2019