Skip to main content

Tutorial 1- Build a Simple Metapage with Image Display

In this tutorial, you'll create your first metapage that allows you to upload and display images. This simple example will introduce you to the core concepts of metapages: creating a metapage, adding metaframes, and connecting them to establish data flow.

Getting Started

Once you've entered the metapage.io site and created an account, you're ready to begin.

Step 1: Create a New Metapage

Click on the "+ New" button at the top right of the metaframes homepage.

Step 2: Name Your Metapage

Give your new metapage a name. For this tutorial, we'll call it "My first metapage".

After creating your metapage, you'll see an empty workspace like this:

Adding Metaframes

Step 3: Add the Files Metaframe

To upload and view files, we'll use the "Files" metaframe:

  1. Click on the "+ Add" button
  2. Select "Files View" from the dropdown


Step 4: Working with the Files Metaframe

The Files metaframe will now appear in your metapage. You can:

Take a moment to explore these features.

Step 5: Add the Show Image Metaframe

Next, we'll add a metaframe to display images:

  1. Click the "+ Add" button
  2. Select "Image/Video"
  3. Click "+ Add from search"

In the search, start typing “image”, when you see the metaframe below, select it:


Click the “+ Add” button


Step 6: Arrange Your Metaframes

Resize and reposition both metaframes so they're side-by-side in the workspace.

Creating Your Workflow

Step 7: Upload an Image

Let's upload an image using the Files metaframe:

  1. Click the upload button
  2. Select an image from your device

You can use this sample dog image we use here if you like.

Step 8: Change the Display Mode

To ensure the correct file is sent, change the display mode to Selector:

  1. Click the gear icon at the top right of the Files metaframe
  2. Select "Selector" under Display mode

Step 9: Select Your Image File

Use the "Select file" dropdown to choose your uploaded image.

Connecting Metaframes

Step 10: Open the Data Flow Editor

The image isn't displaying yet because we need to create a data connection:

  1. Click on the "Connect" button in the Show Image metaframe menu
  1. In the data connections editor, make sure files is in orange and Show Image in green in the boxes on the top
  1. A dotted line points from files to Show Image, indicating the potential connection

Step 11: Connect the Metaframes

To connect the metaframes:

  1. Click "Connect All" to send all outputs from files to the inputs of Show Image
  2. Click "Save" to save the changes and exit the connections editor

Click here for more about connecting.

Step 12: View Your Image

Your selected image will now appear in the Show Image metaframe. Congratulations on creating your first functional metapage!

What You've Learned

In this tutorial, you've learned how to:

  • Create a new metapage
  • Add metaframes to your workspace
  • Upload and select files
  • Create data connections between metaframes
  • Build a simple but functional workflow

Next Steps

In the next tutorial, we'll take things further by running Python code in a container, directly in the browser.

View Solution Metapage