Slots

Each page is split into logical UI pieces to help you keep your UI modular. A single slot has its scoped CSS which means it can be styled by classes which only affect a given slot and their names can be duplicated in other slots. In the exported code, slots will be extracted to dedicated files making them more maintainable. See Slot directive for more details.

Reusable Slots

Similar to slots however they can be used across multiple pages. They can be understood as partials. You'll be editing a reusable slot in a dedicated HTML editor and injecting it in pages using an empty Slot directive.

Widgets

Widgets are modular pieces of UI you can install with a single click in pages or Reusable Slots.

Repositories

You can switch among multiple repositories of widgets. As a free user you have access to basic repo which should give you an idea how widgets can speed up your work. A member of Freelancer subscription can access Pro repo and the future repos which we are still working on. Enterprise customers get the way to create their own repos to suit their business needs.

Docs

You can explore widgets by choosing one in the widget sidebar. Each widget is documented. You'll be able to see its thumbnail, basic info, what parameters it gets, what CSS classes are customizable and what will be auto-generated when it's installed.

Versioning

In short, the widgets are versioned using semantic versioning so you’re safe using them. When the project is exported, all the dependencies end up in dependencies in a package.json file. Then, either npm or yarn can be used to guarantee nested package locking.

Installation

Before hitting install you need to place your mouse cursor on a valid place in HTML.

• Inside layout
• Outside Slot directive
• Wherever HTML to be inserted won't break existing one

• Wherever HTML to be inserted won't break existing one

When in a page, after hitting "install" an HTML snippet with a Widget will be inserted wrapped into a Slot directive.

Note that in reusable slots, after hitting "install", it won't be wrapped into a slot. This is because you can't nest slots inside reusable slots.

Widgets can be as simple as a block of text or more complex like multi-stage form with premade business logic split into Commands, Providers and Reusable Functions.

There are many things happening implicitly when installing a widget. In short:

• It is added to [dependencies] together with its all nested widgets and Reusable Functions.
• All its premade Commands and Providers are auto-generated if don't exist yet.
• Its scoped styles with customizable empty class declarations are auto-generated. This is also done for any nested widgets.
• Its media files like images or videos are auto-uploaded into media files pane.
• Example input data is auto-generated.

Since a widget is an HTML tag, you can copy-paste to move it around the page or reusable slot.