Macaron
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)
Demo
- See the Website.
Usage
- See the guide.
Roadmap
- Better component usability
Development
Setup
# Clone
git clone --recursive git@github.com:macaron-elements/macaron.git
cd macaron
# Install dependencies
yarn
# Build
yarn buildProject Structure
/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.
Start devservers
yarn dev- http://localhost:3000 : Demo editor
- http://localhost:4000 : Docs
- http://localhost:7007 : Storybook for paintkit
- http://localhost:1234 : Test Project
Launch VS Code extension
- Make sure
yarn devis running - Open the root directory in VS Code
- Press F5 (or menu Run → Start Debugging)
Test
yarn test
# Update snapshots
yarn test -uRelease a new version
Version bump
GH_TOKEN={GitHub PAT with repo: scope} yarn bump-version # this runs `lerna version --conventional-commits --create-release github`Publish NPM packages
yarn build
cd packages/compiler
yarn publish
cd ../..
cd packages/loader-vite
yarn publishPublish the VS Code extension
Log in to vsce before publish
yarn build
cd packages/vscode
yarn vsce publishAnalytics
Macaron uses Plausible to collect anonymous analytics data.