Skip to main content

MightyMeld Configuration

Configuration

MightyMeld uses a configuration file called mightymeld.json to understand your app. It should be placed in the root of your repo.

System Configuration​

run​

"run": "npm run dev",

Default: null

When set, MightyMeld will run this command to start your app, so you can use one command to start both your app and MightyMeld.

web_server_url​

"web_server_url": "http://localhost:5173",

Default: "http://localhost:3000"

MightyMeld needs to know where to load your app.

web_server_ip​

"web_server_ip": "127.0.0.1",

Default: not set

This setting allows you to explicitly set which address MightyMeld will proxy.

In some situations a web_server_url starting with http://localhost will resolve to ::1 (an IPv6 address) when your server is actually bound to 127.0.0.1. This setting allows you to fix that.

port​

"port": 3000,

Default: One higher than your app’s port

The port that MightyMeld will run on. For example, if your app runs on port 3000, then by default, MightyMeld will run on port 3001 and proxy your app there as well. Your app will still be available on 3000, but will also be proxied (with an injected script tag) at 3001

meta_dir​

"meta_dir": ".mightymeld",

Default: ".mightymeld"

The directory in which MightyMeld will store metadata, for example all of the visible views you are using. We recommend you add this directory to your .gitignore file.

local_domain​

"local_domain": "192.168.0.12",

Default: "localhost"

The the hostname or domain that is used to access the machine your web app is running on (typically your local box).

Customization​

run_prettier​

"run_prettier": true,

Default: false

If set, Prettier will be used to format the code that MightyMeld injects. Make sure your .prettierrc file is in a location that's include'd. If you don't provide a .prettierrc, the default Prettier settings will be used.

For security reasons, we currently don't support config files in JavaScript format (e.g. .prettier.config.js). If you have such a file, please convert it to a supported JSON file.

editor​

"editor": "sublime",

Default: url:vscode://file/%FILENAME:%LINE:%COLUMN

Sets which editor will be used to open files. When you provide a string such as "code" or "sublime" MightyMeld will use the launch-editor library to open your editor of choice. A list of all supprted editors is available.

If your editor supports a custom URL scheme, you can use that method by providing a string that starts with url:, followed by the URL to use. The following variables will be replaced in the URL:

  • %FILENAME
  • %LINE
  • %COLUMN

prefab_dir​

"prefab_dir": "src/prefabs",

Default: not set

An optional path of a directory that stores a prefab collection. These prefabs will appear in your library panel and be available to you for building. Documentation for the prefab file format has not yet been written.

tailwind​

"tailwind": true,

Default: false

If set, Tailwind AI Assist will be available for all elements in your project.

browser_presets​

"browser_presets": [
  {
    "name": "iPhone 14 Pro",
    "width": 390,
    "height": 844,
    "icon": "tablet"
  },
  {
    "name": "iPhone 14 Pro Max",
    "width": 428,
    "height": 926,
    "icon": "mobile"
  },
  {
    "name": "iPad Pro 12.9",
    "width": 1024,
    "height": 1180,
    "icon": "tablet"
  }
  {
    "name": "iPad Pro",
    "width": 1024,
    "height": 1366,
    "icon": "tablet"
  },
  {
    "name": "Macbook Pro",
    "width": 1440,
    "height": 900,
    "icon": "desktop"
  }
],

Default:

[
  {
    "name": "Mobile",
    "width": 400,
    "height": 800,
    "icon": "mobile"
  },
  {
    "name": "Tablet",
    "width": 720,
    "height": 900,
    "icon": "tablet"
  },
  {
    "name": "Desktop",
    "width": 1280,
    "height": 1024,
    "icon": "desktop"
  }
]

Default browser sizes, each preset will result in a button appearing in MightyMeld Studio allowing you to quickly createa a browser frame of the specified size.

The presets also affect the width toggles that appear above browser frames (to the left of the URL controls).

The optional "icon" value determines which icon is used, it can be "mobile", "tablet", or "desktop" (defaults to "tablet").

The other values ("name", "width', and "height") are required.

Code Interpretation​

include​

"include": ["src"],

Default: ["."]

Include any directories or files that contain React components.

exclude​

"exclude": ["node_modules", "__tests__"],

Default: ["node_modules"]

An optional array of filters that will be applied to file names before they are searched for code. "node_modules" is excluded by default. You should make sure to exclude it explicitly if you set this field and node_modules is inside one of your include directories. Occassionaly, code will appear that can’t be parsed by MightyMeld. For example, we currently don’t support Flow type checking, and Flow files cause an error. Exclude such files so that you can use MightyMeld on the remainder of your codebase.

generative_ai​

"generative_ai": false,

Default: true

When set to true, AI features (prompt to update code) are enabled.

import_replacements​

// Expand ~ to client/app
"import_replacements": {
  "~": "client/app"
},
import Button from '~/components/Button';

Default: not set

An optional object specifying string substitutions to perform on import statements. This allows MightyMeld to process imports it may not otherwise be able to resolve. Currently, we only support replacing the beginning characters.

variables​

"variables": ["src/css/global.css"],

Default: not set

An optional array containing the path to files that contain variables (such as CSS variables) that you want to use while editing your project.

Version Control​

branch_prefix​

"branch_prefix": "mightymeld-",

Default: not set

If set, MightyMeld studio only operates on branches that begin with this prefix. All branches created by MightyMeld will have this prefix.