Opus UI

Docs

Reference

Community

About Intenda

Blog

From JSON to Jazz

Opus weaves melodies between the power of traditional code and the simplicity of low-code. Define simple components and interactions through JSON and watch as Opus breathes harmony into everything in between.

GET STARTED

What is Opus?

Hit the perfect pitch between traditional development and low-code

Opus allows developers to rapidly build user interfaces no matter the complexity of the design.

•

Build components and interactions through JSON

•

Flow states between components and watch them perform in unison

•

Centralize themes

•

Re-use components and behaviour

helloWorld.json

{
	"type": "containerSimple",
	"prps": {
		"backgroundColor": "#6E9BEA",
		"padding": true,
		"paddingSize": "4px 8px",
		"borderRadius": "4px"
	},
	"wgts": [
		{
			"type": "label",
			"prps": {
				"readme": [
					"Change my color to red, or",
					"change my type to input"
				],
				"cpt": "Hello world!",
				"color": "white"
			}
		}
	]
}

{
	"type": "containerSimple",
	"prps": {
		"backgroundColor": "#6E9BEA",
		"padding": true,
		"paddingSize": "4px 8px",
		"borderRadius": "4px"
	},
	"wgts": [
		{
			"type": "label",
			"prps": {
				"readme": [
					"Change my color to red, or",
					"change my type to input"
				],
				"cpt": "Hello world!",
				"color": "white"
			}
		}
	]
}

Preview

Hello world!

Why use Opus?

Rapid development, without restrictions

Opus provides you with the toolset to develop the way you want. No matter how simple or dynamic your needs, Opus empowers all genres.

•

Unlike low-code platforms, Opus doesn't dictate how you should design or build

•

Seamlessly blend Opus and JavaScript

•

Opus takes care of all your state management

•

Convert from design to implementation without constraints

flowingStates.json

{
	"type": "containerSimple",
	"wgts": [
		{
			"type": "label",
			"prps": {
				"cpt": "Type a color:"
			}
		},
		{
			"id": "inputColor",
			"type": "input",
			"prps": {
				"value": "#6E9BEA"
			}
		},
		{
			"type": "label",
			"prps": {
				"cpt": "State flows!",
				"flows": [
					{
						"from": "inputColor",
						"toKey": "color"
					}
				]
			}
		}
	]
}

{
	"type": "containerSimple",
	"wgts": [
		{
			"type": "label",
			"prps": {
				"cpt": "Type a color:"
			}
		},
		{
			"id": "inputColor",
			"type": "input",
			"prps": {
				"value": "#6E9BEA"
			}
		},
		{
			"type": "label",
			"prps": {
				"cpt": "State flows!",
				"flows": [
					{
						"from": "inputColor",
						"toKey": "color"
					}
				]
			}
		}
	]
}

Preview

Type a color:

State flows!