Skip to main content

Javascript Template Engine for web development

Project description

JS-templater

A Flask library/tool to use pure DOM JavaScript rendering with a view engine. JS-templater allows you to build modern web applications by rendering JavaScript templates on the server side while maintaining a clean separation between your Python backend and JavaScript frontend.

Features

  • 🚀 Simple Integration: Easy to integrate with Flask applications
  • 🎨 Pure JavaScript: Use vanilla JavaScript for rendering, no framework dependencies
  • 📦 Template Engine: Server-side template generation with context data passing
  • 🔧 Flexible: Pass JSON context data to your JavaScript templates
  • 📝 Clean HTML: Generates clean, semantic HTML structure

Installation

pip install jstemplater

Or install from source:

git clone https://github.com/yourusername/JS-templater-python.git
cd JS-templater-python
pip install .

Quick Start

1. Basic Flask Setup

from flask import Flask
from jstemplater import JSTemplate

app = Flask(__name__)

# Initialize JSTemplate with your static files root
js_template = JSTemplate(static_root='/static')

@app.route('/')
def index():
    # Render a JavaScript template
    return js_template.render('index', context={'title': 'Welcome', 'user': 'John'})

2. Project Structure

Your Flask application should have the following structure:

your-app/
├── app.py
└── static/
    ├── css/
    │   └── style.css
    └── javascript/
        └── src/
            └── index.js

3. JavaScript Template Example

Create static/javascript/src/index.js:

// Get the root element
const root = document.getElementById("root");

// Parse context data if provided
let context = {};
if (root.dataset.content) {
  context = JSON.parse(root.dataset.content);
}

// Render your application
root.innerHTML = `
    <h1>${context.title || "Hello World"}</h1>
    <p>Welcome, ${context.user || "Guest"}!</p>
`;

API Reference

JSTemplate(static_root)

Initialize the JSTemplate engine.

Parameters:

  • static_root (str): The root path for static files (e.g., '/static')

Example:

js_template = JSTemplate(static_root='/static')

render(script_name, context='')

Render a JavaScript template.

Parameters:

  • script_name (str): Name of the JavaScript file (without .js extension)
  • context (dict, optional): Context data to pass to the template as JSON

Returns:

  • str: Complete HTML document with embedded script

Example:

html = js_template.render('dashboard', context={'users': ['Alice', 'Bob']})

Examples

See the examples directory for more detailed usage examples.

Requirements

  • Python >= 3.6
  • Flask (for web framework integration)

License

See LICENSE file for details.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Author

Mark Wayne B. Menorca

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

jstemplater-1.0.0.tar.gz (3.9 kB view details)

Uploaded Source

Built Distribution

If you're not sure about the file name format, learn more about wheel file names.

jstemplater-1.0.0-py3-none-any.whl (4.2 kB view details)

Uploaded Python 3

File details

Details for the file jstemplater-1.0.0.tar.gz.

File metadata

  • Download URL: jstemplater-1.0.0.tar.gz
  • Upload date:
  • Size: 3.9 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/6.2.0 CPython/3.11.14

File hashes

Hashes for jstemplater-1.0.0.tar.gz
Algorithm Hash digest
SHA256 10815e5c1efb889901c80b07e2ad8419327af2d4f6b4be91b30f5479ae5b9bca
MD5 af1efffd31387b806f37b069775e860e
BLAKE2b-256 9b56f5cfead80cc317585fb3eb8a64eaa656e5bcf967cc9167eb202d0adac94f

See more details on using hashes here.

File details

Details for the file jstemplater-1.0.0-py3-none-any.whl.

File metadata

  • Download URL: jstemplater-1.0.0-py3-none-any.whl
  • Upload date:
  • Size: 4.2 kB
  • Tags: Python 3
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/6.2.0 CPython/3.11.14

File hashes

Hashes for jstemplater-1.0.0-py3-none-any.whl
Algorithm Hash digest
SHA256 4d2a2de86f37eec3184ead9d22da1d85047b5c017571c59f0e73fcf52459db96
MD5 8921b90ed03eca297d1c14a2eaa8d6d0
BLAKE2b-256 94d6361053999853c34d5a7a58e93c0cb786cbba95d53d623964e147c1c63bee

See more details on using hashes here.

Supported by

AWS Cloud computing and Security Sponsor Datadog Monitoring Depot Continuous Integration Fastly CDN Google Download Analytics Pingdom Monitoring Sentry Error logging StatusPage Status page