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 build
Project 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 dev
is running - Open the root directory in VS Code
- Press F5 (or menu Run β Start Debugging)
Test
yarn test
# Update snapshots
yarn test -u
Release 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 publish
Publish the VS Code extension
Log in to vsce before publish
yarn build
cd packages/vscode
yarn vsce publish
Analytics
Macaron uses Plausible to collect anonymous analytics data.