@morfeo/dev-tools

@morfeo/dev-tools is part of the @morfeo eco-system, a set of framework-agnostic tools that help you to create beautiful design systems for your web and mobile apps.

Documentation | API | Contributing |

One of the most important feature of morfeo is the web extension, with the web extension you will always be able to see your theme and play with it.

Installation

You can install it by going to chrome webstore and add it to your plugins: Install morfeo dev tool

Usage

Once you have done the installation, open the chrome devtool by inspecting the page or simply typing: alt + cmd + j, you'll see a new tab called Ⓜ️ Morfeo:

Try it right now to see a sample theme provided by us!

Enable Dev Tool in your application

Enable dev tool in your application it's pretty easy, just install @morfeo/dev-tools:

# npm
npm i @morfeo/dev-tools
# yarn
yarn add @morfeo/dev-tools

the in your app, before setting the theme, just add:

import { enableMorfeoDevTool } from '@morfeo/dev-tools';
import { morfeo } from './myTheme';

enableMorfeoDevTool();

morfeo.setTheme('default', myTheme);

In a future release the dev tool will probably be always enabled by default

Contribute

We want to improve the dev tool as much as possible and add functionalities like:

• change the application theme from the theme
• increase the supported theme slices
• a UI to easily generate the style based on the theme
• theme storage to apply theme presets to your application

If you want to help us, check our GitHub!

If you want a particular funcionality or you found a bug, open an issue here