System Designer

System Designer

  • Languages iconSvenska
    • English
    • Ελληνικά
    • Português (Brasil)
    • 繁體中文
    • Help Translate
  • SUPPORT
  • GITHUB

›Tutorials

Introduction

  • What is System Designer?
  • What is Design First?
  • Quick Start
  • Quick Start in videos

Guides

  • Installation
  • Create a System
  • Create a Schema
  • Edit a model
  • Create a Behavior
  • Create a Type
  • Create a Component
  • Run your System
  • Export a System
  • Import a System
  • Generate a diagram
  • Sync your systems with GitHub
  • Design a remote client system
  • Design a remote server system
  • Hantera tillägg
  • Extend System Designer
  • Shortcuts

Tutorials

  • List of Examples
  • Bundle your CSS
  • Bundle your JavaScript
  • Bundle your HTML
  • Test a server-side application
  • Create a NPM module
  • Create a website
  • Lyssna efter en modellhändelse
  • Listen to a data store event
  • Send messages
  • Send messages to other systems
  • Create an extension
  • Generate a model from a JSON file
  • Create a Graph system

Articles

  • Articles about the project

About

  • Who is behind System Designer?
  • Privacy Policy
  • License
Translate

List of Examples

Here a list of examples that you can import in System Designer and test.

How to install the examples?

  • right-click on Download the example,
  • save it on your computer,
  • open System Designer,
  • drop the saved file on System Designer,
  • a dialog will be shown and
  • click on Import button.

Create a Todo manager

The purpose of this example is to learn how to code in System Designer.

Taken from TodoMVC. Based on the work made by TasteJS (under a Creative Commons Attribution 4.0 International License).

Dowload the example

See the example

Image Alt

Create a DVD collection

This system shows a list of DVD.

If you create a DVD Component when running the system, the list will be automatically updated.

Download the example

See the example

Image Alt

Create a filtering list

  • create a schema, example Book, add properties,
  • create Book components,
  • open list component, and set 'model' property to Book,
  • run the application and
  • you see the list of your components and you can filter that list.

Download the example

See the example

Image Alt

Create a Web Component

The tag <mywidget message="hello world !"/> is added to the body of the page. This tag calls the component MyWidget. It generates an input and a span tag that are binded: the value in the span change if you change the input value.

note: the purpose of the example is to show how easily you can create Web Component, and we show only one way to do that.

Download the example

See the example

Image Alt

← ShortcutsBundle your CSS →
  • Create a Todo manager
  • Create a DVD collection
  • Create a filtering list
  • Create a Web Component
System Designer is distributed under Apache License 2.0 - Copyright © 2024 Erwan Carriou