Django Structured JSON Field: Unleashing the Power of Validated JSON in Django

Gabriele Baldi — Tue, 01 Apr 2025 07:27:54 +0000

🎯 The Lightbulb Moment

Imagine you're working on a Django project, and you have a JSON field that feels like a wild west of data—unpredictable, unvalidated, and potentially chaotic. You've wished for a way to:

Define strict data structures
Validate incoming data effortlessly
Create meaningful relationships within your JSON fields
Maintain performance and integration with Django's ecosystem

Well, dream no more. 😈 Django Structured JSON Field is here to transform your JSON data handling!

🧩 The Genesis of the Project

Every great library is born from a real-world problem. In this case, the challenge was simple yet profound: how do we bring structure, validation, and intelligence to JSON fields in Django?

The Core Challenge

Django's JSONField is flexible, but flexibility can be a double-edged sword. Without proper validation, you risk:

Inconsistent data structures
Validation happening too late in the process
Complex and error-prone manual validation logic

Enter Pydantic: The Validation Superhero

The solution came from an unexpected ally—Pydantic, the validation powerhouse behind FastAPI. By leveraging Pydantic's robust model validation, we could bring order to the JSON chaos.

✨ Key Features That Make Django Structured JSON Field Shine

1. Pydantic-Powered Validation

from django.db import models
from structured.fields import StructuredJSONField
from structured.pydantic.models import BaseModel
from pydantic import Field

class Address(BaseModel):
    street: str = Field(..., description="Street address")
    city: str
    zip_code: str
    country: str = "United States"  # Default value demonstration

class User(models.Model):
    name = models.CharField(max_length=100)
    contact_info = StructuredJSONField(schema=Address)

In this example, the contact_info field is now a structured, validated JSON field. Try to save an incomplete or incorrect address, and Django Structured JSON Field will raise a validation error.

2. Django Model Relationships Reimagined

from django.db import models
from structured.fields import StructuredJSONField
from structured.pydantic.models import BaseModel

class Company(models.Model):
    name = models.CharField(max_length=100)

class Employee(BaseModel):
    name: str
    company: Company  # Direct relationship with Django model!

class TeamStructure(models.Model):
    team_details = StructuredJSONField(schema=Employee)

Yes, you read that right—you can now create relationships with Django models directly in your Pydantic models!

3. Performance-First Design

We didn't just stop at validation. A custom query optimization system ensures that these powerful features don't come at the cost of database performance. Complex relationships? Handled efficiently.

4. Seamless Framework Integration

Django Admin: Validation errors are displayed cleanly
Django Rest Framework: Serialization becomes a breeze
Custom Validation: Extend and customize as needed

🚀 Getting Started

Installation

pip install django-structured-json-field

Quick Setup

Install the package
Import StructuredJSONField and BaseModel
Define your Pydantic models inheriting from BaseModel
Use in Django models
Enjoy validated, structured JSON fields!

🤔 Real-World Use Cases

E-commerce product specifications
User profile additional information
Configuration storage
Complex nested data structures
Page templates and content

🌟 Why Choose Django Structured JSON Field?

Clarity: Make your data intentions explicit
Validation: Catch errors early
Flexibility: Adapt to complex data needs without renouncing relationships
Performance: No compromise on speed
Integration: Works seamlessly with Django ecosystem

🤝 Community and Contribution

This is an open-source project, and we believe in community power!

Found a bug? Open an issue
Have a feature idea? Submit a pull request
Experiencing something unique? Share your use case!

📍 Learn More

GitHub: Django Structured JSON Field
Documentation: Explore advanced usage and configurations

Disclaimer: This library might just make your Django development too enjoyable. Use with caution! 😄🐍

Boost Your Nuxt Website Performance and Lighthouse Score with Critical CSS (Fix render blocking CSS)

Gabriele Baldi — Wed, 29 Mar 2023 07:55:33 +0000

When it comes to website performance, every millisecond counts. Slow loading times can lead to user frustration, higher bounce rates, and ultimately a negative impact on your business. This is where Critical CSS comes into play. In this post, we will explore how Critical CSS can improve your website performance and boost your Lighthouse score.

👀 What is Critical CSS?

Critical CSS is a technique that involves identifying the styles needed to render above-the-fold content on a page and prioritizing their loading to improve page speed. Above-the-fold content refers to the part of the page that is visible without scrolling. By prioritizing the styles needed to render this content, the page can be displayed faster, giving users a better experience.

🛎️ Why is Critical CSS important?

One of the key metrics that Google's Lighthouse tool measures is website performance, which is influenced by various factors, including page speed and visual stability. Slow loading times can have a negative impact on user experience and can lead to higher bounce rates, which in turn can hurt your search engine rankings. Critical CSS helps improve these metrics by speeding up the time it takes for above-the-fold content to be displayed, making it an important tool for improving website performance.

🎉 Good News: Nuxt-beastcss does that for you!

Nuxt-beastcss makes it easy to implement Critical CSS on your website without the need for complex configurations or manual code changes. Simply install the module and add a few lines of code to your Nuxt configuration, and you're ready to go! Beastcss handles the rest, identifying and prioritizing the styles needed to render above-the-fold content, and inlining them directly into the HTML file, reducing the number of HTTP requests required to load the critical CSS.

⭐️ Features:

🧙 Zero-configuration required
🧬 Auto Enables Nuxt CSS Extraction
📝 Inject critical CSS automatically to page html
🧼 Removes injected CSS from main files
⚡️ Lightning fast
🎭️ Working both in ssr and generate mode
👯 Both Nuxt 3 and Nuxt 2 supported.

📦 Quick Setup:

Add nuxt-beastcss dependency to your project

# Using pnpm
pnpm add -D nuxt-beastcss

# Using yarn
yarn add --dev nuxt-beastcss

# Using npm
npm install --save-dev nuxt-beastcss

Add nuxt-beastcss to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    'nuxt-beastcss'
  ]
})

That's it! You can now use Nuxt Beastcss in your Nuxt app ✨

🔨 Options:

You can write the nuxt-beastcss config like this:

// nuxt.config.js
import { defineNuxtConfig } from 'nuxt'
export default defineNuxtConfig({
  modules: ['nuxt-beastcss'],
  beastcss: {
    // Options passed directly to beastcss: https://github.com/freddy38510/beastcss/tree/master/packages/beastcss#options
    config: {
      // Default: false
      fontFace: true,
    },
  },
})

In the config object you can pass all beastcss-official-options.

👏 Thanks

Thanks to @freddy38510 for his work on beastcss and thanks to @leeoniya for dropcss the magic behind HTML parsing speed.

DEV Community: Gabriele Baldi