The Membrane Dashboard

The dashboard is a customizable interface for viewing data and executing repetitive workflows. With the dashboard, you can quickly build utilitarian UIs on top of your Membrane programs.

Using the dashboard

Opening

To open the dashboard, click DASHBOARD in the top left of your editor.

Installing

If you haven’t already, install the membrane/dashboard package. This program will track the blocks you add to the dashboard and their position. Now you’re ready to add stuff!

Adding blocks

To add a block to your dashboard, simply drag ‘n drop a gref onto the dashboard. If the gref’s node type does not have a custom view, the block will display the graph view for that gref, just as you would see in the left sidebar.

We cover creating and generating custom views below, but first let’s discuss organizing and navigating around the dashboard.

Moving

• Move a block by dragging and dropping. The dashboard grid is intentionally coarse. Blocks are sized and positioned in 128px increments.
• Resize a block by dragging from its bottom right corner.
• Pan by pressing the command key and dragging the dashboard background.
• Picker mode. Press the space key to zoom out, then select a block to zoom in on it. Or press space again to zoom in on your mouse position.
• Fullscreen. Toggle by pressing the f key or clicking the fullscreen icon button in the top right corner dashboard menu.
• Arrange blocks by clicking the arrange icon button in the top right corner dashboard menu.

Creating views

In this section, we’ll explain how to create dashboard views by hand.

Tip

To accelerate development of custom views, skip to the section below on generating views with Brane.

Custom views correspond to node types in a program. So if your program has a User type, you could create a custom User view that displays select fields (like name and email) and exposes an action (e.g. disable). Whenever you drop a gref of type User onto the dashboard, it will use the User view you created for that block.

views.tsx

First, create a views.tsx file in any Membrane program (views.jsx works, too). To create a view for a type, export a function (or arrow function——dealer’s choice) by the same name from views.tsx. E.g. for a User type, we export a User view:

export function User({ self }) {
  return (
    <col>
      <row>
        <text style={{ fontSize: "large" }}>{self.name}</text>
      </row>
      <row>
        <text>{self.email}</text>
      </row>
      <row>
        <button action={self.disable}>Disable account</button>
      </row>
    </col>
  )
}

View functions receive an object parameter with a self property, which is a reference to the node. So this User view would have access to all fields, actions, and events on the User type.

The dashboard uses a Membrane-specific flavor of JSX. For full coverage of valid elements and styles, read our JSX reference.

Tip

While editing code in a views.tsx file, corresponding blocks will be highlighted in the dashboard based on your cursor position. Or, press cmd+shift and hover over view code to highlight its corresponding blocks. You can also hold cmd+shift and click a block to go to its view code.

Generating views

While you can always write views by hand, it’s usually more practical to generate a view in a matter of seconds. Just ask Brane to generate a view for a particular type, or for many types in a program.

Once Brane spits out your view(s), use the generated code as a starting point or ask Brane to iterate. Or rely on inline editor completions as a middle ground between crafting by hand and full generation.

How the dashboard works

As you may have noticed, dashboard is itself a Membrane program! It has actions to put, move, remove, and rename blocks. It uses state to store blocks you’ve added with some data and metadata for each block. You can even drag dashboard grefs…onto the dashboard!

The canvas-like dashboard UI is implemented using JSX and Rust compiled to WASM. If you inspect the page via browser devtools, you’ll see an HTML <canvas> wherein we run the compiled Rust code. We use a frontend Rust framework called egui along with a flexbox layout crate taffy.

As for the code you write or generate in views.tsx, that uses a custom Membrane JSX implementation. See our reference page if you want to know which elements and props are available to use.