Getting Started

Prerequisites

Ensure that Node.js (18 or above) and npm are installed on your system.
Recommended IDE: Use VS Code along with the Svelte extension.
You will need a Zoho Desk account to test your extension and a Sigma account to publish it on the Zoho Marketplace.

Installation

Clone the template repository and install the necessary packages.
The template is pre-configured with Deskblocks, TypeScript definitions, and other essential utilities.

 git clone https://github.com/imohanvadivel/desk-ext-template.git
 cd desk-ext-template
 npm i

Configuring the SVG loader

Deskblocks ships its icon set as .svg files, and the components inject them as inline markup. Every extension must therefore load SVG files as raw strings rather than as URLs.
The template repository is already set up this way. You only need to do this yourself when adding Deskblocks to an existing project.
Install vite-svg-loader and register it in vite.config.ts with defaultImport set to raw :

 npm i -D vite-svg-loader

// vite.config.ts
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import svgLoader from 'vite-svg-loader';

export default defineConfig({
	plugins: [sveltekit(), svgLoader({ defaultImport: 'raw' })]
});

Seeing file paths instead of icons?

Without svgLoader({ defaultImport: 'raw' }) , Vite resolves each icon import to a URL string instead of the SVG markup, and the components render that string as visible text over their own content. Buttons, chips, empty states and anything else carrying an icon end up garbled with fragments such as /node_modules/deskblocks/dist/icons/source/Account.svg printed into the page.

This fails silently: there is no build error and nothing is logged to the browser console. If your icons look like broken text, check this configuration first.

Testing

Before testing your extension, make sure that developer mode is enabled in Zoho Desk.
You can start the development server by running:

 # Starts the server on port 5000
 npm run dev

Your extension should now be visible inside Desk in the placeholder location specified in the plugin-⁠manifest.json file.
Now that all the scaffolding is done, go ahead and build the rest of the extension :)

Note:

The first time you run the server, you may need to grant sudo permissions to generate a TLS certificate because the development server runs over HTTPS.

Bundling

Once you’ve built your extension, you can bundle the code by running:

 # Bundles the project and generates a zip file in the dist folder
 npm run build

After bundling, you’ll find the packaged zip file (ext.zip ) in the dist folder. This file can be uploaded to Sigma to publish your extension.

Miscellaneous

The plugin-manifest.json , resources.json , and localization files are located in the public directory. Adjust these files according to your extension requirements.
Place static assets (such as images) in the assets folder inside the public directory. You can reference them in your code like this:

<img src="assets/img.png" />