Morph makes it easy to create rich data applications using a combination of markdown formats and React components.

This section provides step-by-step instructions for building data applications.

​
MDX

When building data applications in Morph, use MDX (https://mdxjs.com/) For more information on how to use MDX, see Official MDX documentation. See also.

​
0. Setup

To build a data application, first open the Morph workspace and execute the following commands. This may take several minutes.

npm i -S @use-morph/page-build && npx morph-page init

​
1. Create MDX files

First, create an mdx file to describe the content of your data application. mdx files combine text written in markdown format with React components to create rich content. Create the mdx file in the src directory of your workspace home directory.

​
2. Edit MDX files

Once the MDX file has been created, the contents can be edited.

One very important element is the need to EXPORT two variables:

  • name: This is the pathname of the page for this file. For example, if name is index, this is /, and if name is about, this is /about.

  • title: This is the title of the page for this file. It appears in the menu and title in the screen.

The following is an example of an index.mdx file:

index.mdx

export const name = 'index';
export const title = 'Top page';

# Top page

This is the top page of the data application.

Normal markdown notation can be used.

​
3. Using Morph data

To use Morph data, a dedicated component is used to pass the name of the Python function or SQL file as a property.

Below is an example of a table display of a DataFrame from a Python run:

index.mdx

export const name = 'index';
export const title = 'Top page';

# Top page

This is the top page of the data application.

<div className="h-[600px] w-full">
  <DataTable alias="aggregate_py" />
</div>

For detailed specifications of Morph components, see the Data Application page.

​
4. Launching data applications

To start the data application, click on the Preview button in the top right-hand corner of the mdx file editing screen.

Data VisualizationCanvas