Introducing the New JSX-Based, Snaps UI Component Library

We’ve introduced an industry-standard, easier-to-work-with JSX-based UI system that allows developers to create Snap UIs more easily and customize their Snaps UI even more than was previously possible. This replaces the previous function-based component system, which offered little flexibility. With this new UI library, developers can build interfaces with custom props and even make their own template components.

Additionally, this new system includes UX components that enable various interactive use cases, such as positioning, button variants, dropdowns, and more. Itoffers a better developer experience for defining inline styling, eliminating the challenges we encountered using Markdown.

The previous UI library is still supported but is considered deprecated. We will remove it at some point in the future. We urge Snaps developers to migrate their UI code to the new JSX-based system as soon as possible.

New components

In addition to simplifying the creation of Custom UIs, we've shipped two new interactive JSX components that don’t have equivalent function-based components: Dropdown and Field. These components will allow you to bring more interactivity and better user experiences to your Custom UIs.

The new Box component replaces the panel component and adds positioning and direction options. This allows you to create richer UIs that better fit your use cases. Markdown has been replaced with Bold, Italic, and Link components. These make it easier to work with formatted text.

We will continue to add new components to the JSX API.

Create your own components

The JSX API allows you to create your own components, just like in React. You can either import existing components from @metamask/snaps-sdk/jsx, or compose your own custom components. Here’s a simple example:

import {Box, Form, Input, Button} from '@metamask/snaps-sdk/jsx'

export const MyCustomForm = (props) => (
<Box>
  <Form name="form-to-fill">
    <Input name="user-name" placeholder="Your name" />
    <Box direction="horizontal">
      <Button type="submit">Submit</Button>
      {props.isCancellable && <Button type="button" name="cancel">Cancel</Button>}
    </Box>
  </Form>
</Box>
);

Upgrade an existing Snap project

Here is an overview of the steps required to upgrade an existing Snap project to JSX:

1. Update the Snap package’s dependencies.
2. Modify the linting rules to allow full usage of JSX components.
3. Rename the Snap’s source file to index.tsx if it contains JSX.
4. Adjust the Snap CLI’s configuration to point to index.tsx.
5. Edit the Snap’s tsconfig.json file to enable JSX.

These steps are detailed in our documentation on upgrading a Snap project to use JSX.

Get started

Our template Snap monorepo is already set up to get you started. You can create a new Snap project from the monorepo using the command:

yarn create @metamask/snap my-snap-name

The snap/src/index.tsx file provides an example of using Custom UI with JSX. You can import components from @metamask/snaps-sdk/jsx, and use them to build your UI.

Refer to our Custom UI with JSX documentation to learn about all the components and their props, as well as explore this sample Snap with JSX.