ORMBridgeThe Real-Time Django to JavaScript Data Bridge

The Python-JavaScript Disconnect ​

Python is great for backends. JavaScript is great for frontends. Connecting them is a nightmare.

Developers know this painful truth:

• 80% of app complexity
• 50% of your total codebase
• Hundreds of hours of your time

...on code code that shuttles data between your database and your users.

ORMBridge eliminates this entirely.

ORMBridge: A Seamless Bridge Between Your Django Backend and JavaScript Frontend ​

Keep your Django backend as is, connect it to your frontend with just one line of code:

# Backend: Register your existing Django models with ORMBridge
from ormbridge.adaptors.django.config import registry

registry.register(model=Post)

Once registered, your frontend can interact with your Django data using a familiar query syntax:

// Frontend: Query your backend data with Django-like syntax
const posts = await Post.objects
  .filter({ is_published: true })
  .orderBy('-created_at')
  .fetch();

Layer on permissions, custom querysets and serializer customisation to deliver complex applications.

How It Works ​

1. Connect Your Backend: Register your models with ORMBridge

registry.register(model=Post)

2. Generate Types: Run npm run sync-models in your frontend
3. Query Directly: Interact with your Django data from React, Vue, or vanilla JS

<!-- Vue component using LiveView - real-time UI updates with minimal code -->
<template>
  <div>
    <button @click="addItem">Add Item</button>
    <ul>
      <li v-for="item in items" :key="item.id">
        <strong>{{ item.name }}</strong>: {{ item.value }}
      </li>
    </ul>
  </div>
</template>

<script>
import { createVueLiveView } from '@ormbridge/core';
import { DummyModel } from '../../models/backend';

export default {
  setup() {
    const items = ref([]);
    
    // This one line keeps your UI in sync with backend data automatically
    createVueLiveView(DummyModel.objects.all(), items);
    
    const addItem = () => DummyModel.objects.create({ 
      name: 'New Item', 
      value: Math.floor(Math.random() * 100) 
    });
    
    return { items, addItem };
  }
}
</script>

Advanced Features That Simplify Full-Stack Development ​

Real-Time In One Line ​

ORMBridge automatically triggeres UI updates when data changes on the server - whether from other users, background tasks, or admin actions.

// Create a real-time view that synchronizes with your backend
const postsLiveView = await liveView(
  Post.objects.filter({ is_published: true })
);

// Now your UI components automatically update when backend data changes

Powerful Filtering With Django-Like Syntax ​

Use the same query patterns you already know from Django, including lookups across relationships and complex conditionals.

// Complex queries that map directly to Django's ORM functionality
const featuredTechPosts = await Post.objects.filter({
  is_published: true,
  author__department: 'Engineering',
  Q: [
    Q('OR', 
      { is_featured: true }, 
      { view_count__gt: 1000 }
    )
  ]
}).fetch();

Granular Security Controls ​

Protect your data with the same level of control you expect from Django, but extended to your frontend queries.

# Define permissions that control exactly what each user can access
class PostPermission(AbstractPermission):
    def visible_fields(self, request, model):
        if request.user.is_staff:
            return ALL_FIELDS  # Staff see everything
        return {'id', 'title', 'content', 'published_date'}  # Others see public fields

Why Choose ORMBridge Over Alternatives? ​

Compare ORMBridge to popular alternatives:

Over HTMX ​

• Modern JS Frontend: Use modern JS frameworks (React, Vue) and UI libraries (Shadcn, Tailwind).
• Avoid Coupling: Your frontend and backend codebases remain decoupled

Over Backend-for-Frontend (e.g., Supabase, Firebase) ​

• Keep Your Backend: No need to adopt a new backend service.
• Permissions As Code: Django permissions directly on frontend.

Over OpenAPI Schema and Client Generators ​

• Real-Time In One Line: Your UI will automatically re-render when your backend data changes.
• Advanced Querying: Rich Django-style ORM queries, not just basic CRUD.
• Integrated Permissions: Directly leverage Django's permissions.

ORMBridge provides simplicity, security, and real-time sync without backend changes.

Ready to supercharge your Django app with a beautiful, lightning-fast React/Vue frontend? ​

Get started in under 10 minutes and cut your data-wrangling code by 90%. Whether you're building a simple dashboard or a complex SPA, ORMBridge handles the heavy lifting so you can focus on features that matter.

📖 Quick Start Guide

🛠 Explore Advanced Features