Get Started

Paste Import

Automatically import design data by pasting JSON into the builder.

OxyMade includes a smart paste import feature that automatically detects and imports design data when you paste JSON into the builder.

Overview

When you copy design data (classes, styles, or components) from external sources and paste it into the Oxygen/Breakdance builder, OxyMade automatically:

  1. Detects if the pasted content is valid JSON design data
  2. Parses and validates the structure
  3. Creates the corresponding classes in your project
  4. Provides feedback on the import status

How It Works

Automatic Detection

Simply paste JSON design data anywhere in the builder interface. OxyMade monitors paste events and automatically processes valid design data.

Supported Formats

The paste import system accepts JSON data containing:

  • Class definitions with CSS properties
  • Selector configurations
  • Style objects with breakpoint variants

Example JSON Format

{
  "name": "my-custom-card",
  "properties": {
    "breakpoint_base": {
      "layout": {
        "display": "flex"
      },
      "spacing": {
        "padding": "24px"
      }
    }
  }
}

Using Paste Import

Step 1: Copy Design Data

Copy valid JSON design data from:

  • OxyMade design exports
  • Shared design snippets
  • External design tools

Step 2: Paste in Builder

  1. Open the Oxygen/Breakdance builder
  2. Press Ctrl+V (Windows) or Cmd+V (Mac) anywhere in the builder
  3. OxyMade automatically detects and processes the data

Step 3: Verify Import

After pasting:

  • A notification confirms successful import
  • New classes appear in your class picker
  • You can immediately apply them to elements

Security

The paste import feature includes security measures:

  • Nonce Verification: All imports are verified with WordPress nonces
  • Data Sanitization: Imported data is sanitized before processing
  • Validation: Only valid JSON structures are accepted
  • Capability Checks: Requires appropriate user permissions

Troubleshooting

Paste Not Detected

  1. Ensure you’re pasting valid JSON
  2. Check that the JSON structure matches expected format
  3. Verify you have edit permissions

Import Failed

  1. Check the browser console for error messages
  2. Validate your JSON at jsonlint.com
  3. Ensure required properties are present

Classes Not Appearing

  1. Refresh the class picker
  2. Clear Oxygen’s cache
  3. Check that the class name doesn’t conflict with existing classes

Best Practices

Validate Before Pasting

Use a JSON validator to check your data before pasting to avoid errors.

Use Unique Names

Ensure class names are unique to prevent overwriting existing styles.

Backup First

Before importing large amounts of data, backup your existing selectors.