Skip to main content
AtomicKit’s Export Center lets you package your Elementor design system for backup, team sharing, or migration. Export as a .css file for direct stylesheet use, or as a .json schema for programmatic workflows and external tooling. You choose both the format and the scope of what gets exported each time you download.

​
Export Formats

.css Stylesheet

A standard CSS file containing all selected global class rules, including responsive @media blocks. Use this file to import classes into another AtomicKit installation, commit it to version control, or load it as a reference stylesheet.

.json Design System Schema

A structured JSON representation of your classes, properties, breakpoints, and design token references. Use this format for programmatic processing, design token pipelines, custom tooling, or documentation generators.
A .css export looks like this: 
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 767px) {
  .flex-center {
    flex-direction: column;
  }
}
A .json export follows a schema like this: 
{
  "classes": [
    {
      "id": "flex-center",
      "label": "flex-center",
      "properties": {
        "desktop": {
          "display": "flex",
          "justify-content": "center",
          "align-items": "center"
        },
        "mobile": {
          "flex-direction": "column"
        }
      }
    }
  ]
}

​
Export Scope Options

You control exactly which classes are included in your export using the scope selector.
ScopeWhat is exported
All ClassesEvery global class currently registered in Elementor
AtomicKit-Tracked OnlyOnly classes that AtomicKit created or imported — excludes any classes added directly through Elementor
Selected ClassesClasses you choose manually using the search-and-filter table
The Selected Classes option opens a searchable table listing all available classes. Filter by name, check the classes you want, and only those are included in the download.

​
How to Export

1

Open the Export Center

In your WordPress admin, go to Elementor → AtomicKit and select the Export tab.
2

Choose a format

Select .css for a stylesheet output or .json for a design system schema.
3

Choose a scope

Select All Classes, AtomicKit-Tracked Only, or Selected Classes. If you choose Selected Classes, use the search table to find and check the classes you want to include.
4

Click Download

Click the Download button. Your browser downloads the file immediately. No data is sent to any external server — the file is generated locally.

​
Common Use Cases

Export your design system as .css and share it with your team. A colleague can import it into their own AtomicKit installation using the Import Center, giving them an identical class set to work with.
Build and refine your design system on a staging site, export it as .css, then import it on the production site. The diff preview in the Import Center makes it easy to see exactly what will change before you commit.
Export your design system regularly and commit the .css file to your project’s Git repository. This gives you a human-readable history of design system changes alongside your theme code.
Use the .json export to feed your design system into style dictionary pipelines, documentation sites, Figma token importers, or any custom tooling that can consume structured JSON.

​
Related

  • Import — bring an exported .css file into another AtomicKit installation
  • Snapshot History — save a restore point before making changes you plan to export