Interactive Rendering Engine

[Ekhorn]

Description

The interactive rendering engine would be designed to be as close to HTML elements as possible and their properties. The item schema will contain the component, and it's attributes. All components can have custom styles, but inherit the default configured styles from the users' settings.

The engine should allow dragging and dropping components based on a grid, and resizing them relative to the columns and rows present. To add a component a grid cell can be clicked.

All components have a read-only variant. Most components have a write variant as well which can be hooked up to any exposed internal operation or (reactive) state.

Some components could have additional decorators, like inputs to place an icon at the start or end inside the input box. This may change to something flexible later on, however it does bring forward that custom SVGs should also be configurable.

Any component can be composed together with others to create a template, these templates should be reusable.

Additionally some very custom components may be implemented through some form of plugin system if none of HTML elements individually or combined, can solve the needed use case.

The engine can be very useful as standalone HTML generator. Creating a library out of it, and being able to integrate either it as runtime or generate static HTML would be ideal (maybe even a hybrid).

Components

Component	Description	Variants	Allowed descendants
div	Renders text, the component records which characters are per each of the following options: italic, bold, strikeout, heading, sub, sup, font, marking. The text may wrap around nested elements.	Markdown	Any* (Markdown uses it's own style)
input	The input can have decorators depending on the type to e.g. make a password field, to add icons or a label	single-line, multi-line, time, date-time, date, radio, check, number, file, color	Decorators
select			Decorators
button			Decorators
link			Decorators
aside			Any
audio			Decorators
break			None
separator			None
figure	Displays anything a <canvas> or <img> tag can do.
code
details	Can hide content, supports a summary		Any
dialog			Any
list
embed			None
progress			Decorators
table	Dedicated component to render borders for each cell in any style imaginable. The component should allow for sorting.		Any
video

```

[Ekhorn]

The concept of decorators and allowed descendants, should maybe change to just descendants as decorators threaten to reintroduce what components already inherently do.

What I really meant to bring up by decorators, is more or less where descendants are allowed and in what way.

[Ekhorn]

The default theme itself must also be configurable as per https://github.com/Ekhorn/spaced/issues/4

[Ekhorn]

Missing

1. Default controls such as: drag & dropping a descendant into any component (that allows) a descendant, deleting a component at any level, adding a component directly inside another component.

2. How to interactively wire components to states / operations.

[Ekhorn]

Should consider menu's such as context-menu's.