Creating your first metapage
Once you’ve entered the app.metapage.io site and created an account you are now ready to create your first metapage. Let’s start with a simple example to upload and display an image.
Step 1: Create a new metapage by clicking on the “Search and commands” bar at the top of the page and selecting “Create a new metapage…”
Step 2: Give your new metapage a name. This can be whatever you want. We will call it “My first metapage”
Step 3: After you first create the new metapage it will look like this.
Step 4: In order to upload and view files we will use the base “Files” metaframe. To add this, first click on the “Edit” button, then click “Add” and select “Files” from the dropdown.
Step 5: Next, we will add the “Show Image” metaframe to view the image that we will upload. To do this, type “show image” into the search bar. Now click the “Add” button next to the “Show Image” metaframe result, and it will be added to your metapage.
Step 6: We have now added all the metaframes we wanted to add to our metapage, so we will exit edit mode and return to View mode by clicking the view button at the top left of the metapage. Your metapage should now look something like the image below. Hint: if you want to resize or rearrange your metaframes you can do this in the “Edit” panel by dragging the bottom right corner to resize and elsewhere on the metaframe to rearrange.
Step 7: Let’s now upload an image to view using the “Files” metaframe. Click the upload button to upload your image of choice. If you would like, you can download the image example we use here by clicking on the link below.
Step 8: You should now see you image displayed in the “Files” metaframe, but it’s not yet displayed in the “Show Image” metaframe because we haven’t yet created a data connection. To do this, Click on “Data Flow” at the top. You should now two see boxes representing the metaframes in the display.
Step 9: Let’s connect them! First click on the “Show Image” box. This will open the Data flow editor with “Show Image” selected as the Target metaframe.
Step 10: Under outputs, click “Add +”, then type ‘’, followed by Enter. Then click on the box with ‘’ below inputs. This will create a ‘’ to ‘’ connection between the metaframes as represented by an arrow (Note: this ‘*’ is called a wildcard and represents all files). Click OK to continue.
Step 11: You should now see the connection between the two metaframes shown in the “Data flow” panel.
Step 12: Return to the “View” panel. Finally, we need to select the image to send from the “Files” metaframe by changing its display mode to Selector. To do this, click on the gear icon at the top right corner of the “Files” metaframe and click “Selector”.
Step 13: Now use the “Select file” dropdown to select your image file.
Step 14: Your selected image will now appear in the “Show Image” metaframe. Congratulations on creating your first functional metapage!!
We’ve covered important features of metapages here including how to create a new metapage, how to add metaframes and create data connections between them. In the next walkthrough we will run our first code in a metapage by running python with pyodide.