Macaron is an open-source design tool to visually create Web Components, which can be used in most Web frameworks, or in vanilla HTML/JavaScript.
Its goal is to allow you to create and continuously maintain components visually, and make Web frontend development easier and more fun.
- 🖊️ Easy-to-use visual editor
- 🧑💻 Runs in Visual Studio Code
- 🌐 Framework-agnostic
- 📥 Import Web Components
- 🗒️ Clean File Format
- 🎨 Copy-paste from Figma (WIP)
- See the Website.
- See the guide.
# Clone
git clone --recursive git@github.com:macaron-elements/macaron.git
cd macaron
# Install dependencies
yarn
# Build
yarn build/packages/editor- The Macaron Editor/packages/paintkit- The submodule for the paintkit library/packages/vscode- The VS Code extension that provides Macaron as a custom editor/packages/figma- The Figma plugin for Macaron/packages/compiler- The compiler that converts Macaron files to Web Components/packages/loader-vite- The Vite plugin to import Macaron files directly from JS/HTML/packages/docs- The Website and documentation
This project uses Yarn Workspaces.
yarn dev- http://localhost:3000 : Demo editor
- http://localhost:4000 : Docs
- http://localhost:7007 : Storybook for paintkit
- http://localhost:1234 : Test Project
- Make sure
yarn devis running - Open the root directory in VS Code
- Press F5 (or menu Run → Start Debugging)
yarn test
# Update snapshots
yarn test -uGH_TOKEN={GitHub PAT with repo: scope} yarn bump-version # this runs `lerna version --conventional-commits --create-release github`yarn build
cd packages/compiler
yarn publish
cd ../..
cd packages/loader-vite
yarn publishLog in to vsce before publish
yarn build
cd packages/vscode
yarn vsce publishMacaron uses Plausible to collect anonymous analytics data.