Skip to main content

Getting Started

Now that you know what Metapages are, let’s jump into creating your first Metapage and explore how to connect different metaframes to create an interactive dashboard. Metapages are powerful because they combine flexibility, simplicity, and collaboration—all within a single webpage. Through the following tutorials, you’ll gain hands-on experience with creating, customizing, and sharing Metapages for various applications.

Here’s what you’ll accomplish in each tutorial:

  • Tutorial 1: Build a Simple Metapage with Image Display

    In this first tutorial, you’ll learn the basics of Metapages by creating an image viewer. You’ll add a Files metaframe to upload images and a Show Image metaframe to display them, then connect these components to see how data flows between them in real time.

  • Tutorial 2: Run Python Code Directly in the Browser

    Expand your skills by using Pyodide, a tool that allows Python to run in the browser, without a server. You’ll create a Metapage that generates a plot using Python code and displays the output live on your page, ideal for lightweight data visualizations.

  • Tutorial 3: Enhance Performance with Docker-Powered Metaframes

    For more complex applications, Metapages support containerized workflows. In this tutorial, you’ll set up a Docker-based metaframe, allowing you to run resource-intensive code and computations securely and efficiently within the browser.

Creating your first metapage