Simplicity Builder™ Quick Start

To get familiar with Simplicity Builder™ we recommend cloning or downloading the example project and studying the code in there. To view detailed information please refer to the Simplicity Builder™ Reference Manual.

All projects will require you to obtain at minimum a trial developer key. You can request a free key without entering any credit card information here or if you are ready to purchase you can go here.

Need help? Contact us with any questions, suggestions, problems or anything else and we'll try to help you get rolling with Simplicity Builder™.

To begin, pick one of the example projects below:

• Vanilla Javascript Example Project
• Angular Standalone Example Project
• Angular Module Example Project
• React Example Project
• Vue Example Project

Once you load one of the example projects, the best way to learn how to customize Simplicity Builder™ for your particular application is to read through the reference manual and check out the sections of creating blocks and defining attribute editors. Look through the example code and see how the blocks and templates are defined. The "circle" example in the hello world example demonstrates fully what you can do with a block.

Vanilla JavaScript Project

Clone the project:

git clone https://github.com/mfoitzik/simplicity-builder-vanillajs-example.git

• Open the project in Visual Studio Code (or your favorite IDE)
• Open the config/config_basic.js file and replace the value for the devKey property with the trial key you received (or dev key that you purchased)
• Open the config/config_helloworld.js file and replace the value for the devKey property with the trial key you received (or dev key that you purchased)

Open the index.html file with your dev server (in Visual Studio Code I use Live Server).

Angular (Standalone) Project

You will need to have the Angular client installed:

npm install -g @angular/cli

Clone the project:

git clone https://github.com/mfoitzik/simplicity-builder-angular-standalone-example.git

In the src/assets/config folder edit both config_basic.js and config_helloworld.js and replace the devKey value with the trial key or dev key you obtained from SimplicityWebTools.com.

npm install
ng serve -open

Angular (Module) Project

You will need to have the Angular client installed:

npm install -g @angular/cli

Clone the project:

git clone https://github.com/mfoitzik/simplicity-builder-angular-module-example.git

In the src/assets/config folder edit both config_basic.js and config_helloworld.js and replace the devKey value with the trial key or dev key you obtained from SimplicityWebTools.com.

npm install
ng serve -open

React Project

Clone the project:

git clone https://github.com/mfoitzik/simplicity-builder-react-example.git

• Open the project in Visual Studio Code (or your favorite IDE)
• Open the /public/config/config_basic.js file and replace the value for the devKey property with the trial key you received (or dev key that you purchased)
• Open the /public/config/config_helloworld.js file and replace the value for the devKey property with the trial key you received (or dev key that you purchased)

npm install
npm run dev

Vue Project

Clone the project:

git clone https://github.com/mfoitzik/simplicity-builder-vuejs-example.git

• Open the project in Visual Studio Code (or your favorite IDE)
• Open the /public/config/config_basic.js file and replace the value for the devKey property with the trial key you received (or dev key that you purchased)
• Open the /public/config/config_helloworld.js file and replace the value for the devKey property with the trial key you received (or dev key that you purchased)

npm install
npm run dev