langium-ui-framework

langium-ui-framework copied to clipboard

A DSL for generating user interfaces, built with

Getting started

• Clone the repository using git clone https://github.com/TypeFox/langium-ui-framework.git
• npm i to install all required dependencies
• npm run langium:generate to generate project
• npm run build to build the project

To run both watchers use npm run watch && npm run langium:watch.

Example

Generate your code using

• node ./bin/cli generate <filename> on Windows
• ./bin/cli generate <filename> on MacOS and Linux

add -w or --watch to run watcher.

Code

div classes[flex-container, center] {
    div classes[border, border--hidden, shadow]{
        heading "Hello World" level: 4
        paragraph 
        "
        Lorem ipsum dolor sit amet, 
        consetetur sadipscing elitr, 
        sed diam nonumy eirmod tempor invidunt ut labore, 
        et dolore magna aliquyam
        "
        { width: "50%" }
    }
}

Result

HTML (Formatted)

<div class='border border--hidden shadow' >
    <h4 >Hello World</h4>
    <p style='width:50%; '>
        <br>Lorem ipsum dolor sit amet, <br>consetetur sadipscing elitr, 
        <br>sed diam nonumy eirmod tempor invidunt ut labore, <br>et dolore magna aliquyam<br>
    </p>
</div>

Image