Introduction

Welcome to JitBlox! JitBlox is a visual environment that lets you design working, modern web apps without coding, leveraging leading UI libraries and front-end frameworks. JitBlox is an easy way for you and your team to quickly try out new ideas, gather early feedback from clients using realistic prototypes, and start your next web project with solid source code and UI components that developers are already familiar with.

If you want to read more about the motivations behind JitBlox, you might want to take a look at the about JitBlox page.

At this moment, JitBlox only generates Angular apps, but we plan to target more frameworks in the future (so keep an eye on our roadmap).

How it works

Your typical design workflow with JitBlox would be as follows:

• add_circle1 - Start a new project - from scratch or from a template.
• widgets2 - Create your design using third-party components, layouts and ready-made design fragments.
• edit3 - Customize your design using quick styling tools and proven CSS utilities.
• download4 - Download the full source code for your project (or push it to GitHub) - no dependencies, no vendor lock-in.

But there may be more advanced things you want to do as your app comes to life, such as:

• dashboardOrganize your app into custom components to improve reusability.
• format_shapesAdd more styling with custom themes and style sheets to fit your unique brand.
• datasetConnect mock data to your UI to make it even more realistic.
• repeatAdd logic, such as If-conditions and For Each loops.
• shareShare share your project or a preview of your app - for collaboration with your team or for feedback from your client.

The JitBlox designer

As mentioned, you don’t need any programming skills to design web apps with JitBlox. It helps if you have some familiarity with HTML, but this is not a requirement. In JitBlox, you create your design using a clean drag-and-drop tree view and get continuous feedback on your changes via various live previews. Here is an overview of the key parts:

1. The explorer pane, which you will use primarily to navigate through your custom components, but which also provides access to the modeling feature and the theme editor.
2. The template editor, which is where you will spend most of your time designing the UI of your app and of any custom components. The Elements tree is a drag-and-drop editor that allows you to easily edit the HTML structure of your component - also known as the component template.
3. The component preview is a real-time preview of the component you are editing. The component preview makes it easier to design a component in isolation even when it is not used yet in your app (read more about the component preview here). To see a real-time preview of the full app, use the Live Preview button instead.
4. The details pane. In this pane you can change all the properties of a selected element. For example, you will find here the quick styling function that allows you to quickly apply CSS utilities, as well as property editors that allow you to change any property of an element or third-party widget. This is also the place to connect your elements with data.

Custom components explained

The above example shows a typical division of the application into custom components: each part of the UI is housed in a dedicated custom component, such as a calendar, contact list and inbox. Dividing your app into custom components is not mandatory, but it helps structure your app and improves reuse. If you're not familiar with component-based applications, you might want to read our intro to component-based apps.

Other concepts

Even though you’ll spend most of your time creating a polished design, understanding the following concepts will help you get the most out of JitBlox. If you have experience building web applications, these will all sound familiar.

• Data binding: Most apps will have some data to display. Data binding establishes a connection between an application's UI and a data source. JitBlox lets you accomplish this without coding, eliminating all the underlying complexity. Learn how to implement data binding.
• Data model: When your app displays data, that data will have a structure that is often specific to your app. For example, if you are building an online bookstore, you might want to define a type Book with properties like Title and Author. The data model is where you define all data types that your application needs. Learn how to create a data model.
• Mock data: Quite often, the application you are designing will not provide its own data: it will get its data from a backend system such as a CMS. By using mock data, you can test your design using realistic data without the complications that come with live or production data.
• API Stubs: Backend systems normally provide data to a Web app through APIs. By defining API Stubs, you can simulate a real API (which may not even exist yet) by making "fake" API calls that return mock data instead. By defining API stubs, JitBlox can generate a lot of boilerplate code that will come in handy once your design is put to use. Learn how to create API stubs.
• Routing: Routing takes care of navigation between pages. In modern web apps, navigating between pages updates the app without completely reloading the full app. Learn how to implement routing.