/langium-ui-framework

A DSL for generating user interfaces, built with Langium

Primary LanguageTypeScriptMIT LicenseMIT


Build status Gitpod Ready-to-Code

SimpleUI is a easy UI Framework for building and generating web user interfaces. SimpleUI includes HTML, JavaScript and CSS.

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

Result