@sodacore/ui/dist/example.js

Sodacore UI is a powerful JSON-based DSL for describing web pages that can be rendered by a frontend JavaScript framework.

import Page from './elements/page';
import Layout from './elements/layout';
import Text from './elements/text';
const page = new Page('Basic Page')
    .setLayout(new Layout()
    .setAreas([
    ['header', 'header'],
    ['sidebar', 'content'],
    ['footer', 'footer'],
])
    .setColumns('1fr 3fr')
    .setRows('auto 1fr auto')
    .setGap('20px'))
    .addElements(new Text()
    .setValue('Header')
    .setArea('header'), new Text()
    .setValue('Sidebar')
    .setArea('sidebar'), new Text()
    .setValue('Content')
    .setArea('content'), new Text()
    .setValue('Footer')
    .setArea('footer'));
console.log(JSON.stringify(page.toJSON(), null, 2));