IDOM is a Python micro-framework that links your web framework of choice to a ReactJS frontend, allowing you to create interactive websites without needing JavaScript!
Following ReactJS styling, web elements are combined into reusable "components". These components can utilize hooks and events to create infinitely complex web pages.
When needed, IDOM can use JavaScript components directly from NPM. Components can also be developed in JavaScript for additional flexibility.
IDOM's ecosystem independent design allows components to be reused across a variety of web frameworks. Pre-existing support is included for many popular Python frameworks, however, any framework with WebSocket support can be adapted to utilize IDOM.
| Supported Frameworks | Supported Frameworks (External) |
|---|---|
Flask, FastAPI, Sanic, Tornado |
Django, Plotly-Dash, Jupyter |
Define your IDOM components within any Python module. To start out, we recommend creating a components.py file within your chosen Django app.
Note: You are free to name and place this file anywhere. Ultimately, components are referenced by Python dotted path in my-template.html.
from idom import component, html
# Components are CamelCase by ReactJS convention
@component
def HelloComponent(recipient: str):
return html.h1(f"Hello {recipient}!")In your Django app's templates folder, you can now add your IDOM component into your HTML using the idom_component template tag using dotted path to the component function.
Additonally, you can pass in keyworded arguments into your component function.
In context this will look a bit like the following...
{% load idom %}
<!DOCTYPE html>
<html>
<body>
{% idom_component "django_project.example_app.components.HelloComponent" recipient="World" %}
</body>
</html>Note: If you do not have a templates folder in your Django app, simply create one! Also, your templates folder will not be detected unless you add the corresponding Django App to settings.py:INSTALLED_APPS.
Follow the links below to find out more about this project.
- Try it Now - Check out IDOM in a Jupyter Notebook.
- Documentation - Learn how to install, run, and use IDOM.
- Community Forum - Ask questions, share ideas, and show off projects.