https://github.com/TypeFox/langium-ui-framework
A DSL for generating user interfaces, built with Langium
https://github.com/TypeFox/langium-ui-framework
Last synced: 6 months ago
JSON representation
A DSL for generating user interfaces, built with Langium
- Host: GitHub
- URL: https://github.com/TypeFox/langium-ui-framework
- Owner: TypeFox
- License: mit
- Created: 2021-10-18T07:40:57.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-06-13T19:51:48.000Z (almost 3 years ago)
- Last Synced: 2024-10-11T23:16:30.724Z (over 1 year ago)
- Language: TypeScript
- Size: 430 KB
- Stars: 16
- Watchers: 6
- Forks: 3
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
A DSL for generating user interfaces, built with
[](https://github.com/TypeFox/langium-ui-framework/actions/workflows/build.yml)
[](https://gitpod.io/#https://github.com/TypeFox/langium-ui-framework)
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 ` on Windows
- `./bin/cli generate ` on MacOS and Linux
add `-w` or `--watch` to run watcher.
### Code
```ruby
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)
```html
Hello World
Lorem ipsum dolor sit amet,
consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore,
et dolore magna aliquyam
```
**Image**
