Features

Components

Components are the basic building blocks of the graphical user interface in Ophixor. You can think of them as Lego blocks. With Lego you have blocks with different colors and shapes. You then combine these into different structures. The same concept applies to components in Ophixor. However, you can also configure each individual component instance, which is not the case for static Lego blocks.

Almost all components have what's called properties. All properties are configurable for each component instance. Most properties represent values of some type. These can be configured with static values or dynamic expressions. Then there are some properties that represent events. These can be configured with actions.

All properties that are used for CSS (Cascading Style Sheets) can be configured separately for mobile, tablet and desktop. But they don't have to be.

Some components have what's called slots. These slots allow a component instance to have component instances as children. This allows for component composition.

All component instances can be configured with a data source. Then that component instance and its descendants get access to data from that data source. A data source can be a model and its data, an expression or an integration.

Many components have variants that you can choose from. A variant is essentially a set of pre-configured properties for a specific component.

You can add your own CSS selectors and properties to any component instance. This allows you to alter CSS for a component instance and its descendants in many different ways.

Both a component and a component instance are defined using JSON. A component has a JSON-based schema that defines everything for it and a component instance is created from that schema. You can't create your own components.

Templates

A template (or component template) has a name and a component. The component can be a component composition or a single component. It can have data sources, expressions and actions. You use it in the same way you use a normal component, because it becomes a normal component (instance) when you use it.

You can create your own templates in the editor or use some of the existing ones.

A template is defined using JSON.

Models and data

A model is a schema that describes the structure and rules that data created for that model must follow. Data is the content that you can read or view.

The structure of a model is for example its fields and the rules are the data types of those fields. The data types that exist currently are boolean, collection, number, relation, single and string.

A boolean can have one of two values; true or false. A collection is like an array or list and contains sub-models with their own fields. A number can be either an integer or a floating-point number. A relation is a pointer to another model. Single refers to a single model with fields, similar to those in a collection. A string is some text, but it has other properties associated with it that determines how you edit it. It has a text type that can be either plaintext or rich text. If the text type is plain text it has a line type that can be either single line or multiple lines.

Both models and data are defined using JSON.

Expressions

An expression is a constant or a function with zero or more parameter arguments that returns a value.

Ophixor comes with many built-in expressions that are ready to be used. For example math-related expressions like "Add", "Cosine", "Floor" and "Maximum" or logic-based expressions like "And", "Equals", "If" and "Not".

Most parameter arguments of function expressions can be supplied other compatible expressions. However, the compatibility check isn't as strict as in other programming langages. For example, a parameter argument that requires a boolean is compatible with an expression that has a return type of any. The value returned will be coerced to a boolean automatically.

An expression is defined using JSON. It has a JSON-schema just like a component, so you can't create your own expressions.

Data sources

A data source can be attached to a component instance in order to make the component instance and its children more dynamic. Properties of the component instance and its children can then use data from the data source. A data source that is an array or a collection will repeat the component instance for each item. You can create a data source from a model and model data, an expression or an integration. A data source is defined using JSON and is part of a component instance.

Actions

An action is a procedure with zero or more parameter arguments that execute some operations. It does not return a value like an expression. Instead it operates by producing side effects.

Ophixor comes with many built-in actions that are ready to be used. For example flow control-related actions like "For each", "If" and "Wait" or user-based actions like "User sign in", "User sign out" and "User sign up".

Most parameter arguments can be supplied compatible expressions. However, the compatibility check isn't as strict as in other programming langages. For example, a parameter argument that requires a boolean is compatible with an expression that has a return type of any. The value returned will be coerced to a boolean automatically.

You can also specify any number of conditions that should be satisfied before the action itself executes. Conditions are just expressions with a return type of boolean.

It is possible to combine multiple actions by specifying any number of actions that should be executed after a given action. How these actions are executed depends on the type of the action. The default approach is that they are executed one by one in the order they are assigned.

An action is defined using JSON. It has a JSON-schema just like a component and an expression, so you can't create your own actions.

Integrations

An integration is a set of endpoints. Each endpoint is configured with a schema that describes the data structure.

Users

A website can have its own users. Some basic templates for signing up and signing in exists.

WebSockets

The platform has support for WebSockets which allows you to create applications with data in realtime.

Design

You can change many global CSS variables for colors, shadows and typographic properties like font family, font size and font weight.

Export

You can export static versions of your pages as clean HTML, CSS and JavaScript. The export pipeline is currently limited in many ways. Some components cannot be exported. The exported page is a snapshot of the page in the editor. It has almost no dynamic features and lacks responsivity.

Performance

Performance is crucial and this is something that is focused on a lot. A page should load fast and not lag.