An appealing prototypical GUI for controlling your Web-App, JSON or JavaScript Object Values
ctrlingctrl-ing is a tiny HTML custom element (18.4 kB uncompressed) used to interactively control your Web-App parameters or JavaScript/JSON object values in a comfortable way with low effort while getting a pleasing GUI.
Fig. 1: Controlling an Animation.The interactive menu for this example was created via:
<ctrl-ing ref="app" darkmode>
[ {"sec":"hdr","text":"Parameters"},
{"sec":"num","label":"a","min":0,"max":10,"step":1,"path":"$['a']","unit":"[-]"},
{"sec":"num","label":"b","min":0,"max":10,"step":1,"path":"$['b']","unit":"[-]"},
{"sec":"hdr","text":"Animation"},
{"sec":"chk","label":"run","path":"$['run']"},
{"sec":"rng","label":"vel","min":1,"max":10,"step":1,"path":"$['vel']"},
{"sec":"hdr","text":"Style"},
{"sec":"col","label":"Stroke","path":"$['ls']"},
{"sec":"col","label":"Fill","path":"$['fs']"}
]
</ctrl-ing>
ctrl-ing.Beside implementing your web application, all you need to do for creating an appealing GUI, is inserting a <ctrl-ing> element to your HTML document (see Listing 1). Its content is compact JSON text, representing an array of section objects. Each section corresponds to a single line in the grid-like view structure of the <ctrl-ing> element's shadow DOM and is associated to either
All section objects are generating plain native HTML (form) elements in the background (shadow DOM).
Let's start with a minimal example resulting in this controlling menu.
Fig. 2: Minimal <ctrl-ing> Example.Here is the complete HTML code.
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>Getting Started</title>
<script src="https://cdn.jsdelivr.net/npm/ctrling/ctrling.min.js"></script>
</head>
<body>
<ctrl-ing ref="obj" autoupdate>
[ {"sec":"hdr","text":"Getting Started"},
{"sec":"chk","label":"Toggle","path":"$['toggle']"},
{"sec":"out","label":"obj=","path":"$"}
]
</ctrl-ing>
<script>
const obj = {
toggle: false
}
</script>
</body>
</html>
<ctrl-ing> element.With this example please take note of following points:
ref="obj" attribute the <ctrl-ing> instance references a global object obj.chk section in the JSON content accesses the toggle member of the reference object obj via its path property using standard JSONPath syntax, where the root identifier "$" corresponds to the ref attribute above.out section is monitoring the reference object in JSON text format.autoupdate attribute of the <ctrl-ing> instance enables monitoring sections to be updated automatically.ctrling.js is inserted via CDN to the page.The generated encapsulated shadow DOM structure for this example is quite clear.
<main>
<section class="hdr">Getting Started</section>
<section class="chk">
<label>Toggle<input type="checkbox"></label>
</section>
<section class="out">
obj=<span><output>{
"toggle":false
}</output></span>
</section>
</main>
Use a local instance or one of the following CDN links for ctrling.js.
https://cdn.jsdelivr.net/npm/ctrling/ctrling.jshttps://cdn.jsdelivr.net/npm/ctrling/ctrling.min.jsctrling is licensed under the MIT License
FAQs
An appealing prototypical GUI for controlling your Web-App, JSON or JavaScript Object Values
The npm package ctrling receives a total of 9 weekly downloads. As such, ctrling popularity was classified as not popular.
We found that ctrling demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.