Fully data driven UI building

[EMHmark7]

Hi, here is my top wish for what Solid can allow. I think it is where a UI framework should lead to or allow.

With Solid js, after Vue.js and Svelte.js, I think I'm getting closer to what I am aiming at:
be able to generate the UI from data in a database, also opening the door to dev the UI from a dev UI, drag and drop, etc.
I do not want to program and see template code, I want the template adapt to user and context, such as language, permissions, just a picklist without all fields, etc. I want a UI that is not in the hard coded code but comes from data served to the client.

The idea is to use a single component that would be recursively called for generating all components and the UI, from data in a database, beside some primitive basic components such as text fields, all HTML widgets that would be encapsulated in a more complex definition (such as a text field that can be either as text display, input, dimmed, or hidden, taking care of its editing status, holding previous value, if it is posted or not, etc. ), dashboard widgets such as meters (involving bot graphical and text content or even sliders or buttons), etc. It would also mean that templates would be automatically generated from a JSON data structure that is easier to read (without html beacons, etc.).
That JSON data content would depend on several elements, such as user permissions and context.

I think the keyword RETURN allowing a string that contains the HTML allows a part of what is needed.
But the next need would be to be able to inject as a string, all the exported functions for each components, as well as be able to inject IN these functions, their inner functions, such as the code selecting data source. In the following image, I am talking about TodoList function, onAdd, onDelete and the todo.js, activating the data connection to source. It should also allow variable definition injection, such as itemInput in the TodoList function, or anything that might be needed in the code.

I think cross site scripting is not much a concern if the real stuff done on the database is done with server side code, beside information about password and account info ( I might be wrong on that, I am not an expert)

Everything should be custom recursively definable in the file containing the App() function. Any necessary code be defined in strings contained in the database, which means definable from a dev UI, such as select the data source for the component.

The following image is a partial digest of the project https://github.com/edemaine/solid-meteor-demo

It shows (in its actual form, not he way I wish to implement it) the example of what I would like to reproduce, for each component level, from data in a database, or a multi level JSON-like variable in a store.

Also, ultimately, I wish to implement html components in a free area, such as canvas, where I could mix both html components and graphical components, such as lines, arrows, relative to other html components, such as forms. I suppose I will need to have two layers, one being a canva for html component free positioning, and another holding more graphical components. I think the ultimate UI should also do the job d3.js is doing. A use case example is a UI allowing a mindmap or a gantt chart where nodes allow data display and edit or form dialog box popups. Another example: a geographical map with popup forms and data display in different areas of the map. A standard way of mixing both html widgets and graphical elements could be defined.