xue 0.0.11

A minimalist web front-end framework composed of HTMX and Python.

Xue

English | Chinese

Xue (show, [ˈʃəʊ]) is a minimalist front-end web framework for quickly building simple web applications. This project is inspired by FastHTML. FastHTML is very useful, but when I was building my blog application, I found that I couldn't solve some bugs related to markdown rendering. Therefore, I decided to write a minimalist web framework myself. I don't like using other people's frameworks because if I encounter problems, I won't know how to solve them. If you, like me, use Python as your development language, I think Xue is suitable for you to quickly develop web applications.

Install

pip install xue

Use

You can use xue to build a simple todo list web application with only 50 lines of code, as follows:

import uuid
from xue import *
from pydantic import BaseModel
from fastapi.responses import HTMLResponse
from fastapi import FastAPI, Form as fastapiForm, HTTPException

app = FastAPI()

# Simulated database
todos = []

class Todo(BaseModel):
    id: str
    content: str

@app.get("/", response_class=HTMLResponse)
async def read_root():
    result = HTML(
        Head(
            Title("HTMX Todo App"),
        ),
        Body(
            H1("HTMX Todo App"),
            Form(
                Input(type="text", name="content", placeholder="Enter a new todo", required="required"),
                Button("Add Todo", type="submit"),
                hx_post="/todos",
                hx_target="#todo-list",
                hx_swap="beforeend"
            ),
            Ul(id="todo-list")
        )
    ).render()

    return result

@app.post("/todos", response_class=HTMLResponse)
async def create_todo(content: str = fastapiForm(...)):
    todo = Todo(id=str(uuid.uuid4()), content=content)
    todos.append(todo)
    return Li(
        todo.content,
        Button("Delete", hx_delete=f"/todos/{todo.id}", hx_target=f"#todo-{todo.id}", hx_swap="outerHTML"),
        id=f"todo-{todo.id}"
    ).render()

@app.delete("/todos/{todo_id}", response_class=HTMLResponse)
async def delete_todo(todo_id: str):
    for todo in todos:
        if todo.id == todo_id:
            todos.remove(todo)
            return ""
    raise HTTPException(status_code=404, detail="Todo not found")

if __name__ == "__main__":
    import uvicorn
    uvicorn.run(app, host="0.0.0.0", port=8000)

Component

Xue provides some simple components that you can use to build your web applications.

The components currently written are: button, checkbox, dropdown, form, input, select. Styling is done using tailwindcss. It mimics the shadcn/ui component library, including smooth dynamic effects, elegant, simple, and aesthetically pleasing interfaces, smooth animations, and responsive interactions.

LLM friendly

Since this is a new framework, if asked, the current LLM will not provide effective suggestions, so I have written a script to automatically generate LLM-friendly documentation. You can use the following command to generate LLM-friendly documentation:

python llm_context.py

The script will automatically save the document in the llm_context.txt file. You can directly copy it to LLM for effective advice.

Tailwind CSS

The JIT (Just-In-Time) mode of Tailwind CSS, here are the implementation steps:

1. Install necessary dependencies:

npm init -y
npm install tailwindcss@latest postcss@latest autoprefixer@latest

2. Create Tailwind CSS configuration file:

npx tailwindcss init -p

This will create the tailwind.config.js and postcss.config.js files.

3. Modify tailwind.config.js:

module.exports = {
  mode: 'jit',
  purge: [
    './templates/**/*.html',
    './static/**/*.js',
    './your_python_file.py',  // File containing your Python code
  ],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

4. Create an input.css file:

@tailwind base;
@tailwind components;
@tailwind utilities;

5. Add an npm script to package.json:

"scripts": {
  "build-css": "tailwindcss -i ./input.css -o ./static/styles.css --watch"
}

6. Run build script:

npm run build-css

This will start a monitoring process that regenerates the CSS whenever your Python file changes.