Auto-Rendered Forms

Compare different CSS framework adapters

Bootstrap 5 Bootstrap 5 Framework

Uses Bootstrap 5 utility classes: form-control, form-label, is-invalid, etc. This is the default framework adapter.

Usage:
context['form_html'] = mark_safe(
    self.as_live()  # Default
)
Features:
  • Modern, polished UI
  • Built-in responsive design
  • Extensive component library
  • Well-documented
Try Bootstrap Demo →

Tailwind CSS Tailwind CSS Framework

Uses Tailwind utility classes: block, text-sm, rounded-md, border-gray-300, etc. Utility-first approach for maximum customization.

Usage:
context['form_html'] = mark_safe(
    self.as_live(framework='tailwind')
)
Features:
  • Utility-first CSS
  • Highly customizable
  • Small bundle size
  • JIT compilation
Try Tailwind Demo →

Plain HTML Plain HTML Framework

Minimal styling with semantic HTML5. Perfect as a starting point for custom CSS or when you want full control over styling.

Usage:
context['form_html'] = mark_safe(
    self.as_live(framework='plain')
)
Features:
  • Semantic HTML5
  • No framework dependencies
  • Easy to customize
  • Minimal CSS footprint
Try Plain Demo →

How It Works

Auto-rendering is simple - just call as_live() with your preferred framework:

View Code:
class MyFormView(FormMixin, LiveView):
    form_class = MyDjangoForm
    template_name = 'my_template.html'

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        from django.utils.safestring import mark_safe

        # Choose your framework:
        context['form_html'] = mark_safe(self.as_live())  # Bootstrap (default)
        # context['form_html'] = mark_safe(self.as_live(framework='tailwind'))
        # context['form_html'] = mark_safe(self.as_live(framework='plain'))

        return context
Template Code:
<form @submit="submit_form">
    
    
    <button type="submit">Submit</button>
</form>

Customization Options

All framework adapters support these options:

self.as_live(
    framework='bootstrap',          # 'bootstrap', 'tailwind', or 'plain'
    render_labels=True,             # Show field labels
    render_help_text=True,          # Show help text
    render_errors=True,             # Show error messages
    auto_validate=True,             # Add @change validation
    wrapper_class='custom-wrapper'  # Custom wrapper class
)