I'm not asking how to use NoCode or LowCode tools, I'm asking how do you make a NoCode/LowCode interface for any tool?<p>For a web application, is it just using JavaScript to drag-dropping divs/images that represent certain actions that get converted to actual code behind the scenes?
A classic and elegant way to design visual programming or a programming language is to write a meta-model.<p>Then you write two ways binding between text source code / visual elements and your model (an instance of the meta-model).<p>A lot of research and tools have been built around that. But basically it’s div/images bound to a model, and a model to code convertor. Or you interpret the model directly.
Basically, it's two parts.<p>1. UI (visual editor) that produces a schema of an application (sometimes it's called DSL (domain-specific language), or AST (abstract syntax tree), or meta-model (as @speedgoose wrote)).<p>2. Interpreter/compiler that converts the schema/DSL/AST/model of your application into the code. Sometimes it's compiling real text code like HTML/JS/CSS. Sometimes it's interpreting in runtime.<p>Usually, it should do both. Code for the output/export/deploy. Runtime for your editor's canvas or preview mode.
Blockly is an example of no-code app that generates code. It is a good starting point to understand how you can build a no code framework. Blockly is...<p><a href="https://developers.google.com/blockly" rel="nofollow">https://developers.google.com/blockly</a><p>High level concepts<p>1. A workspace
2. A set of pre-defined componets that map to functions or statements
3. A way to connect components to back-ends (like spreadsheets or database columns)
4. Some semantics(behavior) for connections.
5. An implied or explicit sequence of interactions between components.
Yes. Microsoft MakeCode is a good example. You drag on-screen blocks (ala Scratch) to define behaviors. These are then converted to runnable code.<p>In the case of MakeCode (and the delightful MakeCode Arcade[0]), both the builder UI and the code conversion are open source, so that you can see how the conversion is done (to Typescript, in this case) or use the building tools in your own product, perhaps with a different output language.<p>[0] <a href="https://arcade.makecode.com/" rel="nofollow">https://arcade.makecode.com/</a>