Workshop is a Framer plugin for creating custom code components. It lets you build, preview, and publish code components without leaving the editor, making it easier to extend Framer with your own React-based elements.

Whether you want to add custom interactions, wrap a third-party library, or build reusable UI, Workshop provides everything needed to get started quickly.

This guide explains what Workshop is, how it works, and the best practices for building your own code components.

What Is Workshop?

Workshop is a code-component building tool available inside Framer. It provides a code editor, live preview, and publishing workflow in a single place.

With Workshop you can:

• Create new code components from a starter template

• Edit component code with instant preview

• Expose property controls for the canvas

• Publish components to your projects

Why Use Workshop?

Workshop removes much of the setup traditionally required to build code components.

Key benefits include:

• No local development environment needed

• Faster iteration with live reloading

• Direct access to project data and the canvas

• A streamlined path from idea to published component

How Workshop Works

Workshop runs your component inside a panel that renders it live as you edit, using the same React environment as your project.

A typical workflow looks like this:

• Open Workshop and create a new code component

• Write your component logic and property controls

• Preview changes instantly inside the editor

• Publish when the component is ready

Building Your First Code Component

Start with a simple component that renders some text or a shape.

From there, you can gradually add functionality such as:

• Adding property controls for editable values

• Styling with inline styles or CSS

• Connecting to external data or APIs

• Handling responsive sizing

Best Practices

• Keep components focused on a single purpose

• Provide clear feedback for user actions

• Expose sensible property controls with defaults

• Test across different sizes and breakpoints

• Document how the component should be used

Common Mistakes

Avoid these frequent issues when building with Workshop:

• Overloading a single component with too many features

• Ignoring error states and edge cases

• Skipping previews before publishing

• Hardcoding values that should be property controls

Final Thoughts

The Workshop plugin makes it easier than ever to extend Framer with custom code components. By starting small, iterating quickly, and following best practices, you can build reliable components that improve your workflow and share them across your projects.