https://github.com/flexilte/flexilte

Flexilte is a powerful Svelte framework that transforms JSON into flex-based pages.
https://github.com/flexilte/flexilte

css frontend skeleton svelte sveltekit tailwind tailwindcss ui-components

Last synced: about 2 months ago
JSON representation

Flexilte is a powerful Svelte framework that transforms JSON into flex-based pages.

• Host: GitHub
• URL: https://github.com/flexilte/flexilte
• Owner: flexilte
• Created: 2024-06-01T12:15:18.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-08-23T01:35:04.000Z (5 months ago)
• Last Synced: 2024-11-07T17:58:31.312Z (2 months ago)
• Topics: css, frontend, skeleton, svelte, sveltekit, tailwind, tailwindcss, ui-components
• Language: Svelte
• Homepage: https://flexilte.github.io
• Size: 561 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Flexilte

The World First Dynamic Component Assembly(DCA) Framework

Flexilte is a powerful Svelte framework that transforms JSON into flex-based pages. It supports any frontend UI framework and custom components, allowing for dynamic page creation and easy integration with AI-generated layouts.

**DEMO https://flexilte.github.io/**

(Yes this entire website is Flexilte json generated)

![Example](docs/layout.png)

## Features

- JSON-driven layout generation

- Support for custom components and any frontend UI framework

- AI-powered page generation

- Drag-and-drop editor

- Flexible and responsive designs

## Installation

Install Flexilte:

```bash

npm install @flexilte/core

```

If you use [skeleton](https://github.com/skeletonlabs/skeleton), Flexilte comes with wrappers:

```bash

npm install @flexilte/core @flexilte/skeleton

```

## Basic Usage

```svelte

	import { Flexilte } from '@flexilte/core';

    export const components = {

        Avatar,

    };

    const layoutConfig: LayoutConfig<typeof components> = {

        "rows": [

            {

                "cols": {

                    "component": "Avatar",

                    "props": {

                        "src": "https://placedog.net/512/512",

                        "width": "w-32",

                        "rounded": "rounded-full"

                    }

                }

            }

        ]

    }

```

## Layout Config Model

Layout config is a recursive tree.

```ts

interface LayoutConfig> {

  id?: string; // will be added to the element

  width?: string; // tailwind class for the width (w-1/6)

  component?: keyof C & string; // component name

  props?: Record; // component props

  nodeClass?: string; // classes apply to cols/rows/elements

  wrapperClass?: string; // create and wrap element with a wrapper, this is a short hand for components that doesn't like flex box

  layoutClass?: string; // classes apply to cols/rows

  cols?: LayoutConfig[]; // array of itself

  rows?: LayoutConfig[]; // array of itself

  posX?: 'left' | 'right' | 'middle'; // we solved css! choose how to position your element horizontally

  posY?: 'top' | 'bottom' | 'middle'; // we solved css! choose how to position your element vertically

  alignHeight?: boolean; // if true then all element in the same row/col will align at the bottom

  wrap?: 'wrap' | 'nowrap'; // choose if element wrap around flex way

  gap?: string; // tailwind class for the gap (gap-4)

}

```