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.
Development
Setup
# Clone
git clone --recursive [email protected]: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
Publish npm packages
lerna publish
Publish 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.