Deskblocks

Deskblocks is an open-source UI component library designed to help you build Zoho Desk extensions with Svelte.

Features

Smart Type Definitions

Deskblocks offers full TypeScript support, including auto-completion and static type checking for all components. The starter template also includes type definitions for the Desk SDK from my other project. This offers detailed descriptions, examples, and code completion for the SDK directly within your IDE.

Auto-Theming

Deskblocks automates color management for you. When a user switches between themes or appearances, Deskblocks automatically updates the colors in your extension. There’s no need to design or develop separately for each theme or appearance—Deskblocks handles it all. Check out the color section to learn how to leverage the color tokens.

Seamless Font Management

Deskblocks takes care of font management for you. When a user changes their typeface preference, Deskblocks will automatically updates the extension to match. Explore the typography section for more details.

Built-in Accessibility

Deskblocks is built on Svelte, which incorporates accessibility (a11y) best practices and performs a11y checks at compile time. Additionally, the color system is based on the HCT color space, ensuring perceptual uniformity and using perceived lightness. The colors are further evaluated using the APAC algorithm to ensure optimal contrast and accessibility.

Figma UI Kit

Deskblocks includes a companion Figma UI Kit with all the essential components, tokens, and templates for promotional assets. It leverages Figma’s variables, allowing you to instantly preview your designs in various themes and appearances, without any external plugins.

Design to Code Generation

Deskblocks includes a Figma plugin that generates production-ready code directly from your designs, powered by Claude 3.5 Haiku. What sets it apart is that it doesn’t just generate any code—it uses Deskblocks components to build the UI. This ensures all the above features like auto-theming, accessibility, and font management work seamlessly out of the box.

Vite-Powered Development

Deskblocks is powered by Vite, bringing all the advantages of a modern build tool to your development workflow. With Vite, you get hot module replacement, ultra-fast compilation, lazy loading, optimized builds, and more—ensuring a smooth and efficient development experience from start to finish.

Installation

To get started, clone the starter template and install the dependencies:

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

Use these commands to streamline the build process:

# Runs the server on port 5000
npm run dev

# Bundles the files and creates a zip in the dist folder
npm run build

For more detailed setup instructions, check out the Getting Started page.

Installing in an Existing Project

If you already have a svelte development setup for building extensions, then you can directly install the Deskblocks in your project.

npm i deskblocks

Then, import global styles in your main.ts file to start using Deskblocks components:

import "deskblocks/globalStyles";

Note:

The official Zoho Extension Toolkit CLI does not support Deskblocks. To use Deskblocks, you’ll need to either use the provided starter template or set up your own custom build tool.

Usage

Import the required components from deskblocks and start crafting your desk extension.

Appearance: Light

Theme: Blue

Font: Zoho Puvi

<script>
	import { Button } from 'deskblocks';
</script>

<Button>Label</Button>