alyssaxuu/slashy

Supercharge Notion with custom commands to record, draw, and more ✍️

Slashy

Supercharge Notion with custom commands to record, draw, and more ✨

Slashy is an open source extension that lets you create custom commands for Notion. Make camera and audio recordings, draw, create reusable components and much more - all for free.

👉 Get it now for Chrome, for Firefox, and for Edge.

Made by Alyssa X

Table of contents

• Features
• How to use Slashy
  • Firefox workaround
  • Accessing the sidebar
  • The draw command
  • The record command
  • Creating a command
  • Editing a command
  • Deleting a command
• Slashy SDK
• Show modal
• Write to Notion
• Add image
• Self-hosting Slashy
  • Installing on Chrome
  • Installing on Firefox
• Libraries used

Features

⚡️ Create your own Notion custom commands, accessible with the slash key
📹 Make video and audio recordings without leaving Notion with /record
🖌️ Make drawings and annotations for your Notion page with /draw
✍️ Easily make commands for reusable blocks and content
🤖 Develop your own plugins with the Slashy SDK
🗄 Manage and edit your commands easily through the Notion sidebar
⚙️ Toggle command visibility and other settings
...and much more - all for free & no sign in needed!

How to use Slashy

First, you need to install Slashy from the Chrome Web Store, the Firefox add-ons website, or self-host it.

Firefox workaround

In order for the /draw command to work in Firefox, you must go to about:config in Firefox (type in the address bar) and then set dom.events.asyncClipboard.clipboardItem to true by clicking on the toggle button on the right. See below:

Accessing the sidebar

You can then open Notion, and you will see a "zap" icon on the top right of the sidebar. Click it to see and manage all the custom commands. Here's how it should look like after installing the extension:

The draw command

One of the default commands Slashy comes with is /draw.

Once you use it in Notion (typing /draw, and then selecting "Make a drawing" from the list), it will prompt a popup with a canvas you can draw on. Here are the tools available within it:

• Color picker: Clicking on the bottom left colored circle lets you switch the color you draw in.
• Pencil tool: Simple pencil drawing tool
• Line tool: Lets you create lines by dragging on the canvas
• Text tool: Lets you create text by clicking somewhere on the canvas, and then typing
• Eraser: Allows you to erase parts of the canvas by dragging on top of it, like a brush
• Clear: Clicking on it will automatically clear the canvas

Once you're happy with your drawing, you can click on "Save", and it will automatically be added into the Notion page.

The record command

One of the default commands Slashy comes with is /record.

To use it in Notion, just type /record and select "Make a recording" from the list. It will prompt a popup, and ask you permission to use the camera and microphone. You need to accept to proceed.

Once the permissions have been set, you will see the camera playback within the popup, and you can click on the red circle to start recording. To stop, just click again, and it will automatically download the file. You can then add it into Notion.

Creating a command

To create a command, click on the blue "New command" button on the top right of the sidebar. This will prompt a popup, that will look like this:

There are several fields in the form:

Field	Type	Description
Image URL	URL (optional)	A permanent link to an image to use as a thumbnail for the command. If not set, a fallback image will be used.
Name	String	The name of the command. This will be visible in the commands list and will be used as a modal title for plugins.
Description	String	The description of the command. It will be visible in the commands list.
Command	String	The alias that will trigger the command. It will always use a "/" to trigger, like other Notion commands.
Type of action	Dropdown	The type of action the command will perform. It can be a "Template", which inserts markdown directly into the page, a "Script", which runs JavaScript code, or an "Image", which inserts an image into the page using a URL
Visibility	Dropdown	It can either be "Visible" or "Hidden", so you can control if the command shows up when using the "/".
Template content	String	Only shows if the command type is set to "Template". Any text (markdown supported) will be inserted into the Notion page.
Image link	URL	Only shows if the command type is set to "Image". The URL provided will be used to insert an image into the page.
JavaScript	JavaScript	Only shows if the command type is set to "Script". The JavaScript code will run after triggering the command. You can use the Slashy SDK to access special methods to interact with Notion.

Editing a command

To edit a command, hover over a specific command in the sidebar (the record and draw commands cannot be edited), and click on the "Edit" button. It will show a popup where you can make any changes or discard them.

Deleting a command

To delete a command, hover over a specific command in the sidebar (the record and draw commands cannot be deleted), and click on the trash button. It will prompt you with a popup to confirm whether you really want to remove the command. Click on "Delete" to confirm.

Slashy SDK

I've added a few methods to make it easier to interact with Notion and create custom plugins in Slashy. You can use these methods in the Javascript field when creating a new command (make sure to set the command type to "Script").

Show modal

showModal(label, placeholder, onsubmit)

Displays a modal with an input field that you can use for a variety of plugins, for example:

The title of the modal will be the same as the name of your command.

Parameter	Type	Description
label	String	The label that will show on the modal above the input.
placeholder	String	The placeholder text in the input.
onsubmit	Function(result)	The function that gets called when the user submits the modal. Should have one parameter to return the input value.

Write to Notion

writeToNotion(content)

Inserts any sort of text (markdown included) into Notion where the user triggered the slash command.

Parameter	Type	Description
content	String	The text to add to the Notion page.

Add image

addImageBlob(blob)

Adds an image to the Notion page where the user triggered the slash command.

Parameter	Type	Description
blob	Blob (type image/png only)	The image to add to the Notion page.

Feel free to suggest new methods for Slashy by making an issue.

Self-hosting Slashy

You can run Slashy locally without having to install it from the Chrome Store or from Firefox Add-ons.

Installing on Chrome

1. Download the code. In the web version of GitHub, you can do that by clicking the green "Code" button, and then "Download ZIP".
2. Go to chrome://extensions/ in your browser, and enable developer mode.
3. Drag the mv3 folder (make sure it's a folder and not a ZIP file, so unzip first), or click on the "Load unpacked" button and locate the folder.
4. That's it, you will now be able to use Slashy locally.

Installing on Firefox

1. Download the code. In the web version of GitHub, you can do that by clicking the green "Code" button, and then "Download ZIP".
2. Open the about:debugging page in your browser, click the "This Firefox" option.
3. Click the "Load Temporary Add-on" button, and select any file inside the mv2 folder
4. You might need to add a temporary extension ID in the manifest.json in order to be able to use storage.
5. In order for the /draw function to work properly, you must go to about:config in Firefox (type in the address bar), and then set dom.events.asyncClipboard.clipboardItem to true by clicking on the toggle button on the right.
6. That's it, you will now be able to use Slashy locally.

Libraries used

• jQuery - for better event handling and DOM manipulation
• FabricJs - for the drawing plugin
• SvalJs - to be able to execute custom scripts (eval doesn't work in MV3)

Feel free to reach out to me through email at [email protected] or on Twitter if you have any questions or feedback! Hope you find this useful 💜

slashy's Issues

unable to launch slashy

hi, i have downloaded slashy as a chrome extension but cannot see it in notion.

I am following this guide on https://slashy.notion.site/slashy/Get-started-with-Slashy-498ef2b3b5724e5dbb20c7da643d0618#93adcf817a5c46beaf7c567b00a7ad53. finished INSTALLATION, skipped FIREFOX WORKAROUD as i downloaded from chrome, then stuck at ACCESSING THE SIDEBAR. the zap sign did not show up. i checked that the extension is opened and granted access, and the google account email matches with notion account email.

please advise on what i can do to fix this problem. thank you,

No feedback after edit a command and save

When you edit a command, then hit the save button, there's no any feedback, such as a toast message or close the modal automatically.

The first time I met this problem I was thinking the extension not work, but I found it has saved the command successfully.

So, maybe after save the command, should close the modal or give some message to tell users it's saved.

Browser: Edge
Extension Version: Chrome Store Version 1.0.4

QUOTA_BYTES_PER_ITEM restriction

Adding commands is restricted by Chrome's Storage Sync QUOTA_BYTES_PER_ITEM limitation of 8192 bytes. The item that causes the issue seems to be the commands entry. Consider splitting it into chunks and then gluing it back together when retrieving.

possible to side load into native app?

Hey there, Slashy looks so awesome!

I was wondering if you had any ideas or suggestions on how one might go about side loading Slashy into the "native" desktop app for macOS.

iiuc, the native desktop apps are simple electron wrappers, but i've never attempted to change them to enable something like Slashy.

Any and all ideas or guidance would be much appreciated! Thank you and congrats on the launch!

Create custom commands grouping multiple notion block / commands

Hi ! Love slahsy and the idea behind it. Plus it looks great: congrats!
I always wanted to be able to create custom slash commands because I frequently use the same set, for example I often create toggle with a code block inside:

• /toggle, enter (or >)
• Type Title + enter
• /code

It would be nice to do the same with for example /ct command, which could contains the 3 steps I described above.

I tried but wasn't able to set it up with Slashy. Do you know if it's possible to embed multiple Notion "commands" / block in one slashy command ?

Firefox can’t find the file at moz-extension://a99918fb-d910-4cea-beec-73959b50bbef/popup.html

After installing this extension, a new button is added to the firefox toolbar with the slashy icon. clicking this button triggers this error:

File not found

Firefox can’t find the file at moz-extension://a99918fb-d910-4cea-beec-73959b50bbef/popup.html.

    Check the file name for capitalization or other typing errors.
    Check to see if the file was moved, renamed or deleted.

And indeed, this file does not seem to exist at all

[Suggestion] Clicking on a command in the sidebar should run it

Clicking on any of these commands doesn't actually run the command, even though all of the items have a pointer of cursor which suggests that they do

Circular method call

I haven't tried this plugin yet, but I was curios about the code. While going through the functionality, I came across following snippet.

Isn't it circular?

Missing default commands Draw & Record on self hosted MV3

Self hosted on Chrome Version 101.0.4951.64 (Official Build) (x86_64)
Using MV3

Issue:

• Default commands draw an record are not visible

Modal suggestions: Enter to submit, backdrop blur/fade, optional esc to blur + click outside

Poor readability when dark mode is enabled

Font color is such that it is hard to read when Notion's theme is set to dark. Consider checking body's attributes if it contains dark and setting the font color based on that.

[Suggestion] Monospace font / real code editor for the JS text box

This would be a nice thing to have, CodeJar is a great framework for this, it lets you use any highlight function and gives you an element, auto indent, parentheses completion, everything else included.

Slashy on smartphone

One of the best reason tu use notion is that you can use it so easily with smartphone. Therefore it would be really pratical if we could use slashy in the smartphone app's (as well as in the computer apps).

Feature Request: Copy an inline equation

I would like to be able to add a custom command to copy an inline equation that I am using repeatedly through out my document. Please let me know if this is already possible, and if not, would it be possible to add this?

Extension doesn't work at all

There seems to be nothing happening when I click on the command block.
I tried chrome and Firefox, built-in and custom command, neither seems to work.
Maybe something changed on notion's side that breaks the extension?

Use an existing page as content source for template

I'd like to create a command, that will embed an existing page within another.

Ex, we have a template page called "New Project Template". I'd like to make a command I can run anywhere "/Template: New Project" and it will duplicate the template into the current page.

Is that possible? Could it be?