Skip to Content
✨ v3.0.4 Released - See the release notes
DocumentationIntroduction

Introduction

Fubam is a lightweight, expressive, and extensible HTML generation engine designed to bring the clarity of Python and the structure of modern frontend workflows into a simple templating experience. It replaces repetitive boilerplate with clean component-driven markup while remaining fast, predictable, and easy to integrate.

Special Fubam placeholders allow writing logic in Python syntax, letting developers focus on structure rather than tangled backend code. Templates receive data at render time and output optimized, production-ready HTML.

It includes:

Component Inheritance & Modular Includes

Fubam supports a clean layout and component workflow, allowing templates to extend base structures and include shared UI fragments. This keeps projects modular, scalable, and easy to maintain.

Reusable Logic Blocks (Macros)

Developers can define reusable logic blocks and import them across templates, enabling powerful abstraction without cluttering markup. These Fubam macros behave like lightweight components designed for real-world frontend reuse.

Built-in Output Safety & Escaping

Fubam automatically escapes dynamic content where appropriate, preventing cross-site scripting vulnerabilities when rendering untrusted data inside HTML templates.

Isolated Rendering Environment

Untrusted or external templates can be processed inside a controlled execution environment, ensuring they cannot access sensitive Python functions or perform unsafe operations.

Automatic Async Compatibility

Fubam handles both synchronous and asynchronous data sources seamlessly. Templates can use async views, API calls, or database operations without any special syntax or manual handling.

Internationalization Friendly

Although intentionally minimal, Fubam integrates smoothly with localization workflows such as Babel or custom i18n pipelines, making it suitable for multilingual projects and global interfaces.

Optimized Template Compilation

Templates compile into optimized Python code—either just-in-time during development or ahead-of-time for production deployments. Caching ensures fast repeat renders and efficient CPU usage.

Precise Error Mapping

If something goes wrong, Fubam points directly to the exact line in the original template. This eliminates guesswork and makes debugging significantly faster.

Extensible by Design

Fubam offers a flexible extension layer: custom functions, filters, transformations, and even syntax hooks can be added to tailor the engine to any project’s workflow.

Design Philosophy

Fubam keeps application logic in Python where it belongs, but never limits the designer’s expressiveness. The goal is to empower developers with structure and speed—without forcing them into restrictive or overly complex patterns.

Features

Fubam is a lightweight Python framework designed for fast, maintainable HTML generation. Its key features include:

  • Lightweight & Fast: Minimal overhead, optimized for speed and performance.
  • Layout System: Organize pages with reusable layouts to maintain clean structure.
  • Component System: Create modular HTML components that can be reused across pages.
  • SEO-Friendly: Automatic injection of SEO tags to improve search engine visibility.
  • Optional JS/CSS Inlining: Inline scripts and styles for faster page loads when needed.
  • Accessibility Enhancements: Provides basic improvements to make content more accessible.
  • Simple API: Render .pmx templates with context dictionaries easily.
  • Flexible & Extensible: Designed to grow with your project without added complexity.
  • Python Native: Fully written in Python, with no external dependencies required.
  • Beginner-Friendly: Clear, intuitive design for both new and experienced developers.

Folder structure

You will find a lot of predefined folders and files in the project. Here is a short description of the most important ones:

      • layout.tsxMain layout
      • page.tsxHomepage
        • index.tsMost of the config are here!

        You can start by changing the main configuration in config/index.ts file. This file contains the most important configuration for the project.

        npm scripts

        Build and dev scripts

        • dev – start dev server
        • build – bundle application for production
        • analyze – analyzes application bundle with @next/bundle-analyzer 

        Testing scripts

        • typecheck – checks TypeScript types
        • lint – runs ESLint
        • prettier:check – checks files with Prettier
        • jest – runs jest tests
        • jest:watch – starts jest watch
        • test – runs jest, prettier:check, lint and typecheck scripts

        Other scripts

        • storybook – starts storybook dev server
        • storybook:build – build production storybook bundle to storybook-static
        • prettier:write – formats all files with Prettier
        Last updated on
        Getting Started