https://github.com/lucsoft/webgen

WebGen is a UI Library. Layout and Design in one. No Custom Toolchain
https://github.com/lucsoft/webgen

css deno typescript ui webgen

Last synced: 12 days ago
JSON representation

WebGen is a UI Library. Layout and Design in one. No Custom Toolchain

• Host: GitHub
• URL: https://github.com/lucsoft/webgen
• Owner: lucsoft
• License: cc0-1.0
• Created: 2019-08-27T17:13:24.000Z (almost 6 years ago)
• Default Branch: main
• Last Pushed: 2025-05-05T00:00:43.000Z (2 months ago)
• Last Synced: 2025-05-05T01:19:03.802Z (2 months ago)
• Topics: css, deno, typescript, ui, webgen
• Language: TypeScript
• Homepage: https://lucsoft.de/p/docs
• Size: 1.76 MB
• Stars: 16
• Watchers: 2
• Forks: 3
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Codeowners: CODEOWNERS

Awesome Lists containing this project

README

        


# WebGen 2.0

A SwiftUI-like Web library

## Getting Started

```ts

// Create a mod.ts file

import { appendBody, Label, WebGenTheme } from "https://deno.land/x/webgen/mod.ts";

appendBody(

    WebGenTheme(

        Label("Hello World!")

    )

);

```

```ts

// Create a serve.ts file

import { serve } from "https://deno.land/x/esbuild_serve/mod.ts";

serve({

    pages: {

        "index": "mod.ts",

    },

});

```

```

deno run -A serve.ts

```

Done! Have fun! More docs will follow

## Architecture

WebGen is build around the 4 main components:

- **Core API**: Bringing layouting, the webgen component pattern and state management.

- **Navigation API**: Build Applications with multiple pages and navigation based on the global URL and the Navigation API.

- **Components API**: A set of prebuild components like Button, Checkbox, Image, List, Sheets.

- **Extended API**: Provides additional features like a scheduler, a network issue resilient fetch/websocket API.