singh-prabh / ugnis

Visual component editor for React, React Native and more...

Ugnis 0.8.2v-alpha

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.

How to try it locally

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

How Ugnis differs from other design tools?

Ugnis has a state that can be changed through events. This allows you to visually create dynamic components:

And edit them on the fly:

How does Ugnis work internally?

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.

License:

Exported components are under the license that your project is.

Editor and compilers are under AGPL. Other Licenses are available upon request.

Contributors

Karolis Masiulis | Jonas Bernotas | Justinas Petuchovas | Vytas Butkus

Thank you:

Douglas Crockford, Alan Kay, Chris Granger, Rich Hickey, Evan Czaplicki, André “Staltz” Medeiros, Sebastian Markbåge and everyone who is pushing programming forward!