How to use React in your Sketch plugin

In this tutorial, you’ll learn how to create a Sketch plugin that runs React in its UI

I recently started looking into plugin development because, for a really long time, I’ve been wanting to build “assistant plugins” for Sketch2React in order to flatten Sketch2React’s framework learning curve.

If you don’t have the patience or the time to read through my entire tutorial you can find a GitHub repo containing the plugin we are going to build here.

Why did I write this tutorial?

I think one of the main reasons why Sketch has become so popular is the vast ocean of plugins that are available. Anyone can identify a need or a pain-point, create a plugin, and share it with the community! The additional functions and features these plugins provide to the core product are pure gold.

Historically Sketch plugins were built with Objective-C and CocoaScript. Problem was — Anyone who wanted to create a plugin first needed to learn Objective-C. That was a really big mountain to climb. It’s not something you learn overnight just to create a design tool plugin.

Anyone who wanted to create a plugin first needed to learn Objective-C

Then, about two years ago, Bohemian Coding (the creators of Sketch) decided to gradually release a refactored plugin API built on pure JavaScript. 🥳

Once this new API was in place, learning Objective-C went from mandatory to optional! This opened the door to a much bigger audience of potential plugin creators — The ”common” web developer.

Despite this shiny new door being wide open, there are still surprisingly few “How to” tutorials about how you create Sketch plugins using their JavaScript API?!

This is what I want to change… Here we go!

Creating a plugin

There are two ways of creating a Sketch plugin:

• Setting up and organizing all the files yourself
• Sketch Plugin Manager — the official utility tool to create, build and publish Sketch plugins

Guess which option we’re going to use 😎

Sketch Plugin Manager

When I started looking into Sketch Plugin Manager I realized that it’s WebView boilerplate project is running Babel. This, in itself, is not surprising. Babel is being used in, more or less, every modern web application today.

What did surprise me was all the pre-installed Babel plugins for React and JSX

All that was missing was a few lines of code in the project’s webpack configuration and well... React itself…

Prerequisites

You need to have Node.js and npm installed on your machine. You can download them here (npm is included in the installation of Node.js)

Setting up your development environment

Let’s start by heading over to Sketch Plugin Manager’s (skpm) Github page. We’re going to follow the installation instructions for setting up a WebView boilerplate project.

Side note

Sketch’s WebView is basically a web browser (including DevTools). Its API is mimicking Electron’s BrowserWindow API.

The WebView floats, in a separate window, on top of the Sketch UI.

Start by firing up the Terminal App.

• Install skpm globally on your machine by entering:

npm install -g skpm

• Generate a boilerplate project containing a WebView. You can use any folder you like. I’ll be creating my project in my Documents folder.

skpm create my-plugin --template=skpm/with-webview

• Now open the folder my-plugin in your favorite code editor. I’ll be using Visual Studio Code.

Enabling React

Adding an entry to webpack.skpm.config.js

Open the file named webpack.skpm.config.js in your newly created project’s root folder and add the following code:

The complete webpack.skpm.config.js looks like this:

The complete configuration file

Adding React

Now you need to add the react and react-dom packages to your project. You do this by downloading them from NPM into your plugin project’s root folder:

npm i --save react react-dom

That’s it! You have now enabled React in your Sketch plugin! Congratulations! 🏅

Using React in your plugin

• Open the file resources/webview.html and add the following HTML within the body tag:

• Open the file resources/webview.js and, at the very top, add:

• At the bottom of the very same file add:

Now, all that is left is to create the actual React component…

• Create a new folder within the folder named resources. I’m going to name mine components.
• Create a new file and name it App.jsx. Add the following code:

Your project structure should look like this:

See it in action!

In order for you to bask in the glory of your own creation do the following:

• Run your project by entering:

npm run start

You should see the following output:

If you see this — It’s all good

• Start Sketch, open your favorite document and run your newly created plugin.

At the bottom of the my-plugin window you’ll see the text “React says hello!”. The rest of the content in the window is from the boilerplate code. You can remove it if you like 😂 I left that out-of-scope for this tutorial.

Troubleshooting

Sketch’s official documentation about debugging a plugin is a good place to start.

FYI: The ”commands” stated in the different help sections are to be run in the Terminal App.

Complete example

You can find a complete plugin project example here.

Conclusion

Setting up React in a Sketch plugin turned out to be pretty straight-forward. In this tutorial, I didn’t build anything fancy. This was only to show you how to get started with React in a Sketch plugin. Where you take it from here is entirely up to you (although I would love to see what you create).

Up next

In part 2 I’ll teach you how to send data between the Sketch document and your React UI.

How to use React in your Sketch plugin – Part II

Thanks for reading!