Skip to main content

MightyMeld Prefab Setup

Setting Up Prefabs

What are Prefabs?

Read about prefabs and how they are useful in MightyMeld.

Video Setup Guide​

Adding Prefabs to Your Project​

  1. Create a directory to store your prefabs in. For example, src/prefabs.

  2. Tell MightyMeld where to find your prefabs:

    mightymeld.json
    {
        "include": ...
        "run": ...
        ...
        "prefab_dir": "src/prefabs",
        ...
    }
    caution

    The prefab directory must be included and not excluded.

  3. Add some prefab files to the directory you created above. Prefabs are ordinary JSX or TSX files that contain template components. See the next section for examples.

  4. Add and commit the prefab file(s) to your git repostory.

  5. Restart MightyMeld (stop and start npx mightymeld) for the new config to take effect.

  6. Reload MightyMeld studio in your browser. You’ll find the new prefabs in the library panel.

Off the Shelf Prefabs​

We maintain a library of prefabs that you can use in your project.

Some you might be interested in:

Creating Your Own Prefabs​

Prefabs are just ordinary JSX files that contain template components. Here’s an example:

import { Alert, AlertTitle } from '@mui/material';

// Will be named `Alert with title` in MightyMeld studio
export const _Alert_with_title = () => (
  <Alert severity="warning">
    <AlertTitle>Title</AlertTitle>
    Description
  </Alert>
);

Customizing prefabs is as easy as editing these simple components. To see the changes in Studio, just refresh your browser.

To learn more about the prefab file format, see the repository README.