Getting started with Clippy

This is a tutorial on how to create a TurboWarp extension with Clippy. Specifically, we will create a replica of a few example extensions from the TurboWarp docs.

Install Clippy CLI

To install the Clippy CLI, run:

npm install -D @omniblocks/clippy If you want to install the Clippy CLI on all projects, change -D to -g - note this may make it more annoying for contributors who didn’t install Clippy before, and it can also bloat your system.

pnpm add -D @omniblocks/clippy If you want to install the Clippy CLI on all projects, change -D to -g - note this may make it more annoying for contributors who didn’t install Clippy before, and it can also bloat your system.

yarn add -D @omniblocks/clippy If you want to install the Clippy CLI on all projects, change -D to -g - note this may make it more annoying for contributors who didn’t install Clippy before, and it can also bloat your system.

bun add -d @omniblocks/clippy If you want to install the Clippy CLI on all projects, change -d to -g - note this may make it more annoying for contributors who didn’t install Clippy before, and it can also bloat your system.

To verify that Clippy was installed, run clippy help. If you see a list of commands, it’s working. If not, search up how to add your package manager’s binaries to your PATH.

Structure

To assist Clippy in collecting block declarations and generating your extension, your repository must look like this:

scratch.yaml or scratch.json / scratch.json5
Directorysrc
- Directoryblocks
  - … soon, we will add hello.js
- Directorymenus
  - … discussed later

Clipy does not care if you have additional folders or files. In fact, this can be useful for cases where you want to reuse logic multiple times.

Extension configuration

This file includes your extension’s ID, name and other information. For now, we only need an ID and name:

scratch.yaml
scratch.json / scratch.json5

id: myExtension
name: My Extension

{
 "id": "myExtension",
 "name": "My Extension"
}