In Morph, you build the frontend using Markdown. By placing components in Markdown files, you can build the UI of your web application.

​
Development Flow

The steps for frontend development in Morph are as follows.

1

Create .mdx Files

By creating .mdx files in the src/pages directory, you can create pages for your web application. The file name becomes the URL path.

touch src/pages/new-page-1.mdx
2

Add Page Title

Add a page title to the .mdx file. The first heading of the page is treated as the title.

# New Page
3

Place Components

Refer to the Component Reference and place components suitable for your data application.

# New Page

Displaying spreadsheet data👇

<DataFrame name="data_google_sheet" height={500} />
4

Start the Development Server

By starting the development server, you can check the web application locally.

morph serve
Building the BackendEnvironment Variables