Captures d’écran


System Designer is an IDE for designing JavaScript systems.

No matter the frameworks you use and the code you write, the most important is the model that you define to create your system.
System Designer helps you to design this model and to generate the classes and components to build your system.


If you look at the different JavaScript frameworks on the market, you will notice that they all have their own way to define a model, generally only with code.

System Designer uses UML, a standard, to define your model. So you probably already know how to design in System Designer even if you have never run it.

The definition of the model is stored on a JSON format called MSON. With MSON you can define types, classes, one to one / one to many relationships and multi inheritance between classes.


Once you have created your model, System Designer generates the skeletons of all your methods. You only have then to add your code to implement them.

System Designer provides you helpers to manage your components. You can easily navigate threw your components to create your application.


There is no need to code to instantiate a component. Create a component in System Designer is like creating a document in a NoSQL Database.

In fact, System Designer acts as an ODM (Object-Document Mapper) to manage your components as NoSQL Documents.


You can run your system directly from System Designer and then export it to JavaScript, HTML, JSON or a Node.js module or a Graphviz file.

Because you have defined a model for your application, a Dynamic Type Check is done on every action of your system. All warnings are send and shown in System Designer.


System Designer can load the model of any system that runs on the browser or on Node.js. You can see the schemas, models, components and methods of the running system and you can edit them.

All modifications to the model done inside System Designer will be send to the running system. There is no need to reload to see your modifications.


System Designer can be used on macOS, iPhone, iPad or any browsers. You can also install it in your project: System Designer requires no backend to work, it is a full web application.

System Designer has a Github module to synchronize your work between all these apps. You can begin your design on your Mac and then continue it on your iPad.


Version 4.0.1

- Improved performance and stability.

Notes et avis

4.7 sur 5
14 notes

14 notes

smirky1 ,

Nice work

This is a really creative and de-facto well-structured approach to application and API design that I’m really digging… it’s making it pretty painless for me to put together something that I thought would have taken much, much longer. Especially considering I don’t know what I’m doing; I’ve been using Python on and off for the past ten years. But the structure of “behaviors” (and the fact that I’m not doing anything too complicated) makes it pretty easy for me to stack-overflow my way around actually having to learn or do much actual, proper learning, and still put together what’s turning out to be a pretty robust application from virtually nothing…

If I had to complain about something, it would be that some of the icons don’t seem to make much sense… I think if they were just easily to differentiate (different colors maybe), that could be enough. There aren’t a ton of buttons :)

Thanks again. Good work.

Réponse du développeur ,

Thank you for your feedback! About the icons, I plan to try new ones and check if they fit better than the actual ones.

Sal Nash ,

It's great and innovative

I LOVE IT. Thanks 🙏

Réponse du développeur ,

You're welcome and thanks for the review.

mikisw ,

Why do we have to edit json-like files????

Any reason why there isn't a form to create each data-structure and relationship? Kind of a must-have feature. Without it, using index cards for Class-Responsibilty-Collaborator maps — or even drawing rough UML on printer paper — is way less of a headache. It's also more efficient for iteration purposes.

Réponse du développeur ,

Thank you for your feedback. In fact you can edit all the schemas and relations in one form if you enable the advanced mode (a new tab ‘Bundle’ will be then visible if you edit a system). Moreover System Designer was designed with simplicity and accessibility in mind, that is why all the definition of your system is declarative. Because of that, you can design, code and run your system only with your keyboard. There are also many helpers to ease the design of systems (shortcut for navigation, edition, autocomplete, …). If you have other suggestions or remarks, please create an issue on the Github repository of the project so that we can discuss about that.


Erwan Carriou
76.6 Mo
Developer Tools

OS X 10.10.0 or later, 64-bit processor



Rated 4+
© 2019 Erwan Carriou

Prend en charge

  • Partage familial

    Jusqu’à six membres de la famille peuvent utiliser cette app lorsque le partage familial est activé.

Du même développeur