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!