Unicycle is an Electron application built using TypeScript, React and ant.design. Its purpose is to unify the design / development cycle.
Unicycle is an Electron application built using TypeScript, React and ant.design. Its purpose is to unify the design / development cycle.
Unicycle allows you to create, live edit and test presentational components and export them to different frameworks (React and Vue.js by now). Each component has three different parts:
Since Unicycle knows all the possible tests/states of a component it is able to provide you:
Unicycle is able to emulate media capabilities (e.g. media=print), orientation media queries,... So you can test all scenarios without leaving the app.
Unicycle provides a Sketch plugin to export a selection and convert it to a component. The result is not perfect but the CSS and the HTML structure is optimal and semantic to be as simple as possible to fine tune.
Unicycle provides an internal HTTP server that you can enable so you can test your live preview in any browser, including mobile phones.
Unicycle encourages to use a design system. Thus, it provides tools for creating a global stylesheet for defining colors, shadows, fonts and animations. And like everything in Unicycle, you can edit it and see the changes in real time.
npm install
./build-sass.sh
(required to rebuild native dependencies with electron as target and not Node.js)npm run build
(transpiles the TypeScript to JavaScript)npm start
You can output values by using curly braces ({expression}
). The content is a JavaScript expression. For example:
<strong>{author.fullname}</strong>
You can dynamically set an HTML attribute by prefixing it with :
. The value of the attribute will be evaluated as a JavaScript expression.
<img :src="author.image">
Another, more advanced, example:
<div class="card-image" :style="`background-image: url(${card.image})`">
<img :src="card.image">
</div>
You can implement conditional rendering by using the special @if
attribute. Example:
<p @if="author === null">
Renders the paragraph element if author is null
</p>
<div @loop="messages" @as="message">
<div>{message.text}</div>
</div>
For including a component into another component use <include:ComponentName ...>...</include:ComponentName>
This app is a mature experiment. It mostly works, but many options are not implemented yet (e.g. all the exporting options, support for React Native and support for email templates) or are basically a proof of concept (git integration). Also a few things could change in a backwards incompatible way in the near future, so don't.