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 action triggers. 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 variable 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

Coming soon...

Integrations

Coming soon...

Export

Coming soon...

Performance

Coming soon...