Options

`assets`

Settings for assets that miyagi serves (independently from your components).

`root`

default: ""
type: string

This setting can be helpful if assets are located in another folder, e.g. public/assets, but they should actually be served from assets/. In that case you could set this option to public.

`css`

default: null
type: string[]

An array of CSS file paths.

`customProperties`

default:

{
	"files": [],
	"prefixes": {
		"color": "color",
		"typo": "typo",
		"spacing": "spacing"
	}
}

type: object

This object is used to generate your automated design token overview.

More information about the automated design token overview.

`folder`

default: null
type: array

If you need miyagi to serve static assets (like images, SVGs, etc.), you can define one or multiple folders here.

["images", "svgs", "templates"]

`js`

default: null
type: array

[
	{
		"src": "src/index.js",
		"defer": false,
		"async": false,
		"type": null,
		"position": "head"
	}
]

defer, async, type and position are optional.

Please also refer to How to / Adding JS files.

`manifest`

default: null
type: string

If you create CSS and JS files with hashes and have therefore a manifest file, you can set this here and then use the same keys of the manifest file for your CSS and JS files in assets.css and assets.js. miyagi will then resolve these.

`build`

Settings for creating a static build.

`basePath`

default: /
type: string

If you deploy your build into a subfolder instead of the root folder, set this option to the path of the subfolder.

`folder`

default: "build/"
type: string

The folder where your build files will be saved. Use --folder when using as a cli argument.

`components`

`folder`

default: "src"
type: string

The folder where your components live.

`ignores`

default: ["node_modules", ".git", "package.json", "package-lock.json", ".miyagi.js"]
type: array

miyagi ignores these folders and files when looking for your components.

When setting a value, it is added to the default value and does not overwrite it.

`lang`

default: "en"
type: string

Used to determine the language of components. This will set the value for the lang attribute.

`textDirection`

default: "ltr"
type: string

Used to determine the value of the dir attribute on the <html> element.

Note: This only applies the text direction of the components, not if miyagi itself

docs

folder

default: "docs"
type: string|null

The folder where your documentation lives.

engine

render

default null
type: Function required: true

The render function for your templates. The function will be called with an object containing the following key/value pairs:

name: type string — the template path
context: type object — the data being passed to the template
cb: type Function — callback functions that expects an error as the first, and the HTML response as a second argument.

Example

{
	engine: {
		async render({ name, context, cb }) {
			try {
				return cb(null, await twing.render(name, context));
			} catch (err) {
				return cb(err.toString());
			}
		}
	}
}

`extensions`

default: []
type: array

`files`

This is the configuration for your actual component files.

Each entry accepts an object with the following keys:

extension: the file extension in your components folder (type: string)
name: the name of the file in your components folder (type: string)

`css`

default:

{
	"extension": "css",
	"name": "index"
}

Note: You can use "<component>" for name if the file should have the same name as the component folder.

`js`

default:

{
	"extension": "js",
	"name": "index"
}

Note: You can use "<component>" for name if the file should have the same name as the component folder.

`mocks`

default:

{
	"extension": ["json", "js"],
	"name": "mocks"
}

This option supports multiple file extension. This can be helpful if you usually have static mock data, but in some cases you want run some method which returns the mock data (see Asynchronous mock data).

The main extension for mock data is always the first one of this array. So, for example, when creating components via miyagi new the mock data would be of type json (when using the default values).

If you provide a string instead of an array, you can still use .js files as well, as this is the fallback for the second extension.

`schema`

default:

{
	"extension": "json",
	"name": "schema"
}

`templates`

default:

{
	"name": "index",
	"extension": null
}

Note: You can use "<component>" for name if the file should have the same name as the component folder.

`namespaces`

Namespaces are often used in templating engines. While you need to add these to your templating engine directly, you can use the same namespaces also in your mock files to reference template or other mock files.

default: {}
type: object

Example:

{
	"@templates": "/path/to/your/templates"
}

You can then use $tpl: "@templates/some-template" or $ref: "@templates/some-mocks" in your mock data.

`projectName`

default: "miyagi"
type: string

`ui`

Settings for the web UI.

`mode`

default: light
type: string
values: light|dark|auto

Defines if the miyagi UI should by default be rendered in light mode, dark mode or listen to the OS setting.

`reload`

default: true
type: boolean

Defines if your component automatically reloads after saving.

`reloadAfterChanges`

`componentAssets`

default: false
type: boolean

Defines if your component automatically reloads after the css or js file of your component has been updated.

NOTE: This is disabled by default for the case that you have a build process that bundles your components assets. These bundled files could be added to your configuration in the assets key.

`textDirection`

default: "ltr"
type: string

Defines the text direction (dir attribute on the html tag) of the miyagi UI.

NOTE: This does not set the text direction for the components. If you want to change that as well, please have a look at components.textDirection.

`theme`

default:

{
	"favicon": null, // path to a favicon
	"logo": null, // path to a logo — can be used if the same logo should be used for light and dark mode
	"light": {
		// theming for light mode
		"logo": null, // path to a logo
		"navigation": {
			"colorText": "hsl(0, 0%, 12%)",
			"colorBackground": "hsl(0, 0%, 86%)",
			"colorLinks": "hsl(0, 0%, 12%)",
			"colorLinksActive": "hsl(0, 0%, 96%)",
			"colorSearchBorder": "rgba(0, 0, 0, 0.25)"
		},
		"content": {
			"colorBackground": "hsl(0, 0%, 100%)",
			"colorText": "hsl(0, 0%, 12%)",
			"colorHeadline1": "hsl(0, 0%, 12%)",
			"colorHeadline2": "hsl(0, 0%, 12%)"
		}
	},
	"dark": {
		// theming for light mode
		"logo": null, // path to a logo
		"navigation": {
			"colorText": "hsl(0, 0%, 100%)",
			"colorBackground": "hsl(0, 0%, 16%)",
			"colorLinks": "hsl(0, 0%, 100%)",
			"colorLinksActive": "hsl(0, 0%, 16%)",
			"colorSearchBorder": "rgba(255, 255, 255, 0.25)"
		},
		"content": {
			"colorBackground": "hsl(0, 0%, 16%)",
			"colorText": "hsl(0, 0%, 100%)",
			"colorHeadline1": "hsl(0, 0%, 100%)",
			"colorHeadline2": "hsl(0, 0%, 100%)"
		}
	},
	"css": null, // string of CSS which gets added to miyagi and components. can be used to changed the styling of miyagi or e.g. add custom fonts,
	"js": null // string of JS which gets added to components
}

`schema`

`ajv`

default: default import of "ajv"

For more information please refer to the AJV documentation.

`options`

default: {}
type: object

This object gets passed to the instance of the schema validator AJV. See all available options. You can use this to define custom formats e.g..