Teloce-Py
Build interactive Python applications with .vel files. Teloce-Py compiles
the template, browser behavior, and component CSS into normal browser assets;
Flask, FastAPI, Django, or Flaxon remains responsible for routes, APIs,
databases, authentication, and security.
The problem it solves
Python teams often maintain a backend template system and a separate frontend
toolchain just to build forms, dashboards, and reactive UI. Teloce keeps the
interactive part in readable .vel components while preserving the Python
framework you already use.
Fast workflow: write .vel, run python app.py
static/js/App.vel -> app.py builds it -> Python serves the page -> browser runs it
Recommended layout:
my-app/
├── app.py
├── teloce.config.json
├── static/js/App.vel # authored source
├── templates/index.html # HTML shell and #app mount
└── dist/ # generated output; never edit by hand
Copy-paste Flask example
Install:
python -m pip install teloce-py Flask
Create static/js/App.vel:
<template>
<main class="chat">
<h1>Quick chat</h1>
<ul><li v-for="message in messages" :key="message.id">{{ message.text }}</li></ul>
<form @submit.prevent="send">
<input v-model="draft" aria-label="Message" />
<button>Send</button>
</form>
</main>
</template>
<script>
export default {
data() { return { draft: "", messages: [] }; },
async mounted() { this.messages = await fetch("/api/messages").then(r => r.json()); },
methods: {
async send() {
const text = this.draft.trim();
if (!text) return;
const message = await fetch("/api/messages", {
method: "POST", headers: {"Content-Type": "application/json"},
body: JSON.stringify({text})
}).then(r => r.json());
this.messages = [...this.messages, message];
this.draft = "";
}
}
};
</script>
<style scoped>
.chat { max-width: 40rem; margin: 3rem auto; padding: 1rem; font: 1rem system-ui; }
form { display: flex; gap: .5rem; } input { flex: 1; padding: .7rem; }
</style>
Create app.py. It builds automatically, so the only development command is
python app.py:
from pathlib import Path
from flask import Flask, jsonify, render_template, request
from teloce.build import build_project
ROOT = Path(__file__).parent
build_project(ROOT, out_dir=ROOT / "dist", options={"dev": True})
app = Flask(__name__, static_folder="dist/static", static_url_path="/static")
messages = []
@app.get("/")
def home():
return render_template("index.html")
@app.get("/api/messages")
def list_messages():
return jsonify(messages)
@app.post("/api/messages")
def create_message():
text = str((request.get_json(silent=True) or {}).get("text", "")).strip()
if not text or len(text) > 500:
return jsonify({"error": "Message must contain 1-500 characters"}), 400
message = {"id": len(messages) + 1, "text": text}
messages.append(message)
return jsonify(message), 201
if __name__ == "__main__":
app.run(debug=True)
Create templates/index.html:
<!doctype html><html><head><meta charset="utf-8"><title>Quick chat</title></head>
<body><div id="app"></div>
<script type="module">import { mount } from "{{ url_for('static', filename='js/App.js') }}"; mount("#app");</script>
</body></html>
Run it:
python app.py
Open http://127.0.0.1:5000. This is a real Flask API and compiled .vel
UI; it uses in-memory messages for a small demonstration. Add a database,
authentication, CSRF protection, and rate limits before production use.
Flaxon and WebSockets
Flaxon is the async option when the app needs rooms and real-time events. The
verified pattern is accept(), join(room), receive_json(), and
broadcast_json(room, data):
from flaxon import Flaxon
from flaxon.websocket import WebSocket
app = Flaxon("chat", debug=True)
@app.websocket("/ws/chat/<room_id>")
async def chat(socket: WebSocket, room_id: str):
await socket.accept()
await socket.join(room_id)
try:
async for message in socket.iter_json():
await socket.broadcast_json(room_id, {
"text": str(message.get("text", ""))[:500]
})
finally:
await socket.leave(room_id)
Serve the generated asset directory with Flaxon and run the framework's
Flaxon command (python -m flaxon run app:app --reload). Use wss:// behind
HTTPS. The Flask example above intentionally uses ordinary HTTP so it can be
started reliably with only python app.py.
Release checks
teloce lint --strict
teloce build --source-map --hash-assets --bundle --report
python -m pytest -q
python -m build --sdist --wheel
python -m twine check dist/*
Use --bundler esbuild for whole-program tree-shaking, code splitting, and
minification. Teloce supports limited common TypeScript syntax stripping, not
full TypeScript type-checking. Read the documentation,
optimized structure lesson, and
all examples: examples/flask-chat,
examples/fastapi-cms, examples/django-scanner,
examples/flaxon-network, and examples/teloce-gallery.
Status
Teloce-Py is beta software. Pin versions and test generated browser assets in the Python framework and deployment platform you support.
License
MIT
1 maintainer
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Filter files by name, interpreter, ABI, and platform.
If you're not sure about the file name format, learn more about wheel file names.
Copy a direct link to the current filters
File details
Details for the file teloce_py-0.2.3.tar.gz.
File metadata
- Download URL: teloce_py-0.2.3.tar.gz
- Upload date:
- Size: 163.7 kB
- Tags: Source
- Uploaded using Trusted Publishing? No
- Uploaded via:
twine/7.0.0 CPython/3.14.3
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
1f32be5e106894da45fb7dd6d6cf40cc5f7e099de48ca49f4ae6bc17cb62c67b
|
|
| MD5 |
a03b563137b36325f01f940e71ce9432
|
|
| BLAKE2b-256 |
7f60f8760f61299432169359d99d7630db90f2362cde22a5e4f11a91eb1e29b8
|
File details
Details for the file teloce_py-0.2.3-py3-none-any.whl.
File metadata
- Download URL: teloce_py-0.2.3-py3-none-any.whl
- Upload date:
- Size: 203.4 kB
- Tags: Python 3
- Uploaded using Trusted Publishing? No
- Uploaded via:
twine/7.0.0 CPython/3.14.3
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
3038592250bf6ba8758082070a2c1fb84f2182a7ec0561a894c048020b13e8bc
|
|
| MD5 |
db3a352b94e78d94a374fa3c5fa25958
|
|
| BLAKE2b-256 |
ba20974faead4c64f63af6a54c297d4752b4724e0cc16cf9e9d9eeab700c0b73
|
