Flaxon 0.3.0 and Teloce-Py 0.3.0 are available on PyPI. Release instructions are maintained on this site; source links identify the framework snapshot. Check version and upgrade guidance.

Frontend Integration Examples

Flaxon works with modern frontend frameworks through JSON APIs, browser-safe CORS configuration, authentication, and WebSockets.

Supported Frontends:

React
Vue
Angular
Svelte
Next.js

1. React Integration

Backend

from flaxon import Flaxon
from flaxon.middleware import CORSMiddleware

app = Flaxon("react-backend")

app.add_middleware(
    CORSMiddleware,
    allowed_origins=[
        "http://localhost:5173"
    ],
    allow_credentials=True,
)


@app.get("/api/products")
async def products():
    return [
        {
            "id": 1,
            "name": "Laptop",
            "price": 999
        }
    ]


@app.post("/api/orders")
async def create_order(request):
    data = await request.json()

    return {
        "success": True,
        "items": data["items"]
    }

React Client

const API = "http://localhost:8000/api";


export async function getProducts(){

    const response = await fetch(
        `${API}/products`
    );

    return response.json();
}

2. Vue Integration

Backend

from flaxon import Flaxon
from flaxon.middleware import CORSMiddleware


app = Flaxon("vue-backend")


app.add_middleware(
    CORSMiddleware,
    allowed_origins=[
        "http://localhost:5173"
    ]
)


@app.get("/api/tasks")
async def tasks():

    return [
        {
            "id":1,
            "title":"Learn Flaxon",
            "completed":False
        }
    ]

Vue Client

<script setup>

import {ref,onMounted} from "vue"


const tasks = ref([])


onMounted(async()=>{

 const response =
 await fetch(
 "http://localhost:8000/api/tasks"
 )

 tasks.value =
 await response.json()

})

</script>


<template>

<h1>
Tasks
</h1>


<div v-for="task in tasks">

{{task.title}}

</div>

</template>

3. Angular Integration

Backend

from flaxon import Flaxon

app = Flaxon("angular-api")


@app.get("/api/posts")
async def posts():

    return [
        {
            "id":1,
            "title":"Hello Flaxon"
        }
    ]

Angular Service

@Injectable({
providedIn:"root"
})

export class ApiService{


private url =
"http://localhost:8000/api";


constructor(
private http:HttpClient
){}


getPosts(){

return this.http.get(
`${this.url}/posts`
)

}

}

4. Svelte Integration

Backend

from flaxon import Flaxon


app = Flaxon("svelte-api")


@app.get("/api/notes")
async def notes():

    return [
        {
            "id":1,
            "title":"My Note"
        }
    ]

Svelte Client

<script>

let notes=[];


async function load(){

const res =
await fetch(
"http://localhost:8000/api/notes"
);

notes =
await res.json();

}


load();

</script>


<h1>
Notes
</h1>


{#each notes as note}

<p>
{note.title}
</p>

{/each}

5. Next.js Integration

Flaxon works with Next.js using REST APIs, SSR, and dynamic routing.

Backend

from flaxon import Flaxon


app = Flaxon("next-backend")


@app.get("/api/blog/posts")
async def posts():

    return [
        {
            "id":1,
            "title":"Flaxon Blog",
            "slug":"flaxon"
        }
    ]

Next.js API Client

const API =
process.env.NEXT_PUBLIC_API_URL;


export async function getPosts(){

const res =
await fetch(
`${API}/blog/posts`
);

return res.json();

}

Authentication Support

All frontend frameworks can use:

JWT Authentication
Sessions
OAuth providers
Role permissions
CSRF protection

Example:

@app.get("/api/profile")
async def profile(request):

    return {
        "user":
        request.user
    }

WebSocket Support

Flaxon also supports realtime frontend applications.

Example:

@app.websocket("/ws/chat")
async def chat(socket):

    await socket.accept()

async for message in socket.iter_json():

        await socket.send_json(
            {
                "message":message
            }
        )

Works with:

React WebSocket hooks
Vue composables
Angular RxJS
Svelte stores
Next.js client components

Summary

Framework	Integration
React	REST API + WebSockets
Vue	REST API + CRUD
Angular	REST API + RxJS
Svelte	REST API + Reactive State
Next.js	REST API + SSR

Flaxon can power modern frontend applications while keeping a Python-first backend architecture.