Ugnis is a visual editor for designers and developers alike. Try it online!
Exports to React and React-Native (experimental). Vote for more integrations in this issue
Default components use Google Material Design.
Clone the repository, download node modules and compile:
git clone https://github.com/UgnisSoftware/ugnis && cd ugnis && npm install && npm run compile
Start the editor:
npm start
Now open localhost:3000
Warning: Ugnis is still in alpha, we are still missing some features
Ugnis has a state that can be changed through events. This allows you to visually create dynamic components:
And edit them on the fly:
Ugnis is declarative programming taken to the extreme. Because no one wants to write JSON by hand, we have created the visual editor - it manages the code generation, so you could focus on the design and logic.
Ugnis consists of three parts:
- Declarative definition of your Component.
- Visual editor that changes the definition.
- Exporters for each supported framework that take the definition and generate code.
To export all your definitions into React/React-Native just run eporter.js with node:
node exporter
Your components will be inside ugnis_components/react*
Exported components are under the license that your project is.
Editor and compilers are under AGPL. Other Licenses are available upon request.
Karolis Masiulis | Jonas Bernotas | Justinas Petuchovas | Vytas Butkus
Douglas Crockford, Alan Kay, Chris Granger, Rich Hickey, Evan Czaplicki, André “Staltz” Medeiros, Sebastian Markbåge and everyone who is pushing programming forward!