Websolut is an open-source toolkit that helps you turn your Figma designs into production-ready code. It provides a complete development environment with a core engine, a backend API, and a desktop app.
-
Convert Figma to Production Code From JSON to DOMX to any format: HTML+CSS, React, Vue, or your own templates.
-
Desktop App ElectronJS app that ships with backend + configuration UIs.
-
Backend API Built with NestJS, SQLite, Swagger docs, and persistence.
-
Extensible Core Engine Customize your templates, integrate with frameworks, or export to custom targets.
-
Monorepo Everything you need: engine, backend, and desktop — in one codebase.
Choose your platform:
Websolut monorepo contains:
-
Core Engine A Node.js package that converts Figma JSON data into an extended DOM format (DOMX). DOMX can then be rendered through your own EJS templates into any output you need: plain HTML+CSS, React, Vue, or custom frameworks.
-
Backend A NestJS REST API that persists data in a SQLite database and interacts with the core engine. It also provides Swagger documentation and a SPA interface.
-
Desktop App An ElectronJS application that launches the backend alongside two Vue.js apps: one for configuration and another to interact with your backend.
git clone https://github.com/wsolut/websolut.git
cd websolutnpm installRun the backend locally:
npm run dev:backend- SPA: http://localhost:5555/spa
- Swagger Docs: http://localhost:5555/docs/v1
Run the desktop app in development mode:
npm run dev:desktopRun the desktop app in production mode:
npm run start:desktopUsing a macOS environment:
cd apps/desktop
npm run build:macWill produce a unsigned installer and executable inside the dist folder.
npm run dist:macWill use your Apple developer certificates to produce a signed installer and executable inside the dist folder.
Using a Windows environment:
cd apps/desktop
npm run build:winWill produce a unsigned installer and executable inside the dist folder.
npm run dist:winWill produce a signed installer and executable inside the dist folder.
We welcome contributions to Websolut! Here's how you can help:
- Check existing issues to avoid duplicates
- Create a new issue with a clear title and description
- Include steps to reproduce the problem
- Add relevant labels and screenshots if applicable
- Fork the repository and create your branch from
main - Create a feature branch:
git checkout -b feature/your-feature-name - Make your changes and ensure they follow the existing code style
- Test your changes thoroughly
- Commit your changes:
git commit -m 'Add some feature' - Push to your branch:
git push origin feature/your-feature-name - Create a Pull Request with a clear title and description
- Reference any related issues in your PR description
- Include screenshots or GIFs for UI changes
- Make sure all tests pass
- Update documentation if needed
- Keep your commits atomic and well-documented
Follow the Getting Started section to set up your local development environment.
Please be respectful and constructive in all interactions. We're building this together!
Websolut is open source and licensed under the MIT License.