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