All Docs

Guide

Introduction

What is Quark ?

Quark is a general purpose software tool specifically designed to help you create projects written in HTML, CSS and JavaScript with native desktop app like capabilities. Quark apps run on Mac, Windows, and Linux from a single codebase.

How does it work? 🤯

Simply Said: Quark comes with an integrated development environment(IDE) and a JavaScript runtime. You write your code in the IDE and press a button to build your project. That's all!

The IDE automatically takes care of building your project and emits a single output file which you can "double-click" on to open and run your project. We call these output files, "sketches".

For detailed explaination, read our announcement post on Medium.com

See the process in action -

####### In the example above, we create a Quark project, built the project and run the project. All done under 15 seconds!.

Quark Apps (or Sketches) 🎨

We call apps built with Quark, Sketches. Quark itself is built on top of the Electron framework. Your sketches provide you with all the capabilities of full fledged electron apps. The difference here is that they just weigh a few kilobytes instead of hundreds of megabytes.

We achieve this functionality by using a shared JavaScript runtime for all your sketches. This runtime, in most cases, accounts for almost 99% of the weight of an electron app. This leaves us with the actual application logic, which usually only weighs a few kilobytes.

The only caveat here is that because of this shared runtime, your sketches have a direct dependency on the Quark software itself to provide for the runtime. Hence we call these projects built with Quark "sketches" and not applications.

What this means for you is that you can potentially have hundreds of sketches on your machine providing the functionality as that of full fledged electron apps, while consuming the resources equivalent to only one app!

Web Technologies

Quark apps are built using web technologies like HTML, CSS and Javascript. If you can build a website, you already know how to build a Quark app.

Cross Platform 🧬

Another advantage of using web technologies is that your sketches are Compatible with Mac, Windows, and Linux and run on all three platforms. Write once, run everywhere!

Power of Electron 💪

Behind the scenes, we use electron's renderer process as the runtime for your Quark apps. This means, that you have access to all of the Node.js and Electron's renderer process API's in your app.

Unopinionated 🏅

Anything you like, any way you like, in any style. We have out-of-the-box support for modern JavaScript, React.js, Vue.js and Typescript. Take your pick!

Powerful build system

Thanks to the powerful Quark IDE which makes transpiling, bundling and running a project as easy as pressing a button.

Releases

Quark releases frequently. We release when there are significant bug fixes, new APIs or are updating versions of Electron or Node.js.

Versioning

Once Quark releases in beta phase, it will follow semver. Before that no gurantees are made that the API will be changed in a backwards compatible way.

First Steps

To get the most out of Quark, start by reviewing a few introductory topics:

Setting up the environment : Learn how to install Quark and get up and running within minutes.
Quark development environment: Get to know how to navigate through the Quark IDE.
Showcase: View example projects made with Quark.

Setting up Quark

Getting up and running with Quark is quick and easy. It is a small download so you can install in a matter of minutes and give Quark a try.

Cross platform

Quark is a free software which runs on the macOS*, Linux and Windows operating systems and has been tested on the following platforms:

Windows 7 and 10 (64-bit)
Linux (Debian): Ubuntu Desktop 18.xx

Quark is a small download (~100 MB) and has a disk footprint of ~300 MB. Quark is lightweight and should easily run on today's hardware.

We recommend:

1.6 GHz or faster processor
1 GB of RAM

Windows

Installation

Download the Quark installer for Windows from the download page.
Once it is downloaded, run the installer (Quark-win-x64-${version}.exe). This will only take a minute.
By default, Quark is installed under C:\users\{username}\AppData\Local\Programs\Quark.

Alternatively, you can also download a Zip archive, extract it and run Quark from there. On the downside, you will need to manually update Quark for each release.

NOTE

It is recommended that you download the setup file(Quark-win-x64-${version}.exe) instead of the zip archive, since auto-updates are only supported via the .exe file.

If you're prompted by Quark, accept the newest update and it will be installed (you won't need to do anything else to get the latest bits).

Linux

Installation

Download Quark for Linux from the download page.
Once it is downloaded, add the execute permissions to the downloaded file (Quark-linux-x86_64-${version}.AppImage).
Run the appImage to start Quark.

Alternatively, you can also download the .tar.gz archive, extract it and run Quark from there. On the downside, you will need to manually update Quark for each release.

NOTE

It is recommended that you download the setup file(Quark-linux-x86_64-${version}.AppImage) instead of the .tar.gz archive, since auto-updates are only supported via the .AppImage file.

Recommended tools

It is recommended that you install the following third party softwares on your PC which can be used with Quark.

Node.js
Git
A package manager(npm or yarn)

Node.js is a platform for building fast and scalable server applications using JavaScript. Node.js is the runtime and npm is the Package Manager for Node.js modules.

Network

A handful of features within Quark require network communication to work, such as the auto-update mechanism, querying and installing node packages. For these features to work properly in a proxy environment, you must have the product correctly configured.

If you are behind a firewall which needs to whitelist domains used by Quark, here's the list of hostnames you should allow communication to go through:

quarkjs.io
release.quarkjs.io
social.quarkjs.io
npmjs.org

Updates

As long as Quark is in the alpha stage of development, we will release a new version every week, and monthly thereafter.

Versioning

Once Quark releases in beta phase, it will follow semver. Before that no gurantees are made that the API will be changed in a backwards compatible way.

Next Steps

Once you have installed Quark, these topics will help you learn more about Quark:

Quark IDE: A quick orientation to Quark IDE.
Getting Started: A "Hello World" example to get you started with Quark.
References: Learn how to use the Quark API.
FAQs: Frequently Asked Questions.

Getting Started

All docs on one page.

####### Estimated completion time : Less than 5 minutes.

Prerequisites

The official guide assumes intermediate level knowledge of HTML, CSS, and JavaScript.

Steps

Step 1: Installing the Quark IDE

You need to download and install the Quark IDE for your PC from here.

Step 2: Starting a new Project

After installing Quark, open the IDE.
You will be shown a welcome screen. Click on "Start a new Project"

Landing Page

After entering the project name, click on 'Create' button.

Landing Page

If the project was created successfully, you will be prompted to open the project. Click on "Open Project".

Landing Page

Step 3: Navigating through the IDE

After opening the project your view may look something like this.

An image

On the left hand side is the navigation pane. Use this pane to navigate around files and folders.
Also there is a setup.js file, this file is used as the entry point of your code by the Quark build system while building your sketch.
Double click on the file to open the editor. Your view should look something like this.

An image

Step 4: Writing your Code.

Notice that our file already has one line of code, that prints a console message. We'll keep this tutorial to only one line of code.
Let us change the console message to "Hello World, I'm Quark". Your code should now look like this.

console.log("Hello World, I'm Quark");

Step 5: Building the sketch

To build the sketch, press the build button at the bottom right corner of the IDE.

Build

To check the build logs, go to the Output section in Menu bar and select "Build: Focus". This will focus on the build logs output channel.

Build

As visible in the output, our build was successful, now lets run the sketch.

Step 6: Running the sketch

To run the sketch, press the run button at the bottom right corner (adjacent to the build button) of the IDE.
This should run our sketch and a new window will pop open like so.

Build

Notice the console message printed in the devtools output channel. This shows that our code ran properly.

The entire process could be summarized in the following video.

We create a new project, build the project, and run the project. All of which can be done within 15 seconds!!

Next Steps

Of course this is not all Quark has to offer, checkout the tutorials to learn mode advanced concepts.

Quark development environment

All docs on one page.

Now that you've seen Quark in action, let's see how you can configure it to get the most out of it.

Just like many other code editors, Quark adopts a common user interface and layout of an explorer on the left showing all of the files and folders in your project, an editor on the right showing contents of the file you've opened.

When you launch Quark project for the first time, you should get a screen that looks like this:

An image

Basic Layout

The IDE comes with a simple and intuitive layout that maximizes the space provided for the editor while leaving ample room to browse and access the full context of your folder or project. The UI is divided into five areas:

Editor - The main area to edit your files. You can open as many editors as you like side by side. Quark IDE uses the same code editor that powers the VS Code.
Side Bar - Contains different views like the Explorer to assist you while working on your project.
Status Bar - Information about the opened project and the files you edit.
Activity Bar - Located on the far left-hand side, this lets you switch between views.
Panels - You can display different panels below the editor region for output or debug information, errors and warnings, or an integrated terminal.

Code Editor

Quark comes bundled with Monaco code editor which is the same code editor used in VS Code. Monaco editor provides rich IntelliSense, validation and out of the box support for for HTML, CSS, SCSS, JSON, JavaScript and TypeScript.

Explorer

The Explorer is used to browse, open, and manage all of the files and folders in your project.

Here are the following things you can do in explorer:

Create, delete, and rename files and folders.
Move files and folders with drag and drop.
Use the context menu to explore all options.

Virtual File System

One of the unique capabilities of Quark is that is uses virtual file system, sometimes also referred to as in-memory file system. That means all the code that you write and files you create inside the IDE are virtual files with no foot print on your real file system. This is done to make sharing a project as easy as sharing a single file.

Quick Open

If you press Ctrl+p a search box will open. This will let you quickly search and open any file in your project by typing the name of the file.

An image

Command Palette

If you press Ctrl+Shift+P while focused in an editor pane, the command palette will pop up. This is a search driven menu that gives you access to just about any major task that is possible in Quark. Instead of clicking around all the application menus to look for something, you can press Ctrl+Shift+P and search for the command.

An image

Not only you can quickly search through hundreds of commands, but you can also see if there is a keybinding associated with it. You can use these keybindings to execute the command.

Terminal

In Quark, you can open an integrated terminal, initially starting at the root of your project. This can be convenient as you don't have to switch windows or alter the state of an existing terminal to perform a quick command-line task.

To open the terminal:

Use the Ctrl+\ keyboard shortcut with the backtick character.
Navigate to main menu and select Terminal > Fork Terminal.
From the Command Palette (Ctrl+Shift+P), use the Terminal: Fork Terminal command.

Managing multiple terminals

You can create multiple terminals open to different locations and easily navigate between them. Terminal instances can be added by clicking the plus icon on the top-right of the TERMINAL panel or by triggering the Ctrl+Shift+` command. This action creates another entry in the drop-down list that can be used to switch between them.

Remove terminal instances by pressing the trash can button. The terminal instance last focused on gets deleted.
You can also split the terminal by triggering the Ctrl+\ command or by pressing the Fork Terminal button or from the main menu.

Configuration

The shell used defaults to $SHELL on Linux and macOS, PowerShell on Windows. This can be changes in settings by going to Terminal > Process > Shell:*

Settings

It is easy to configure Quark to your liking through its various settings. Nearly every part of Quark's editor can be changed to your liking.

Quark provides two different scopes of settings:

User Settings - Settings that apply globally to any instance of Quark you open.
Workspace Settings - Settings stored inside your workspace and only apply when the workspace is opened. These settings are stored in the .quark/${project-name}.store.qrk file at the root of your project.

You can change the scope of settings by selecting the appropriate option from the select box at the top right corner of the settings window.

NOTE

Workspace settings take priority over user settings.

You can open the settings as follows:

Go to File > Preferences > Settings or trigger the Ctrl+, command.
Or, Open the Command Palette and select Preferences: Open Settings

Settings groups

Common settings are grouped together so that you can navigate through them easily.

Edit Settings

Each setting can be edited by either a checkbox, an input or by a drop-down. Simply edit the text or select the option you want to change to the desired settings.

NOTE

Note that changed settings have a marker besides them to help you identify them easily.

Changing the theme

You can change the theme by changing the setting Editor > Basic Settings > Theme of Editor.

Changing default keyBindings

You can change the default keybindings for the commands.

Press Ctrl+k to open the keybinding editing panel.
Click on the edit icon to the left of the command you want to change keybinding for.
Enter the key combination and press enter to accept.

Installing node packages

Use the inbuilt npm client to install node packages for your projects. Simply type the name of the package and click install on the package that you want to install.

Terminology

You can find definitions for all of the various terms that we use throughout this module in our Glossary.

Hello world app

All docs on one page.

The project that we are finally going to build, will look something like this

Create a new Project

Just like we did it in previous module, create a new project.

Landing Page

Creating the directory structure

For this project, other than the base setup.js file, we are going to need 2 other files. Namely, index.css for our styles, and index.html for our HTML template.

Create both the files from the explorer view.## Your final directory structure should looke something like this:

Writing the code

First, copy the following code into their respective files. We'll explain the working later.

######## In the index.html file

<div class="hello-container">
	<div class="hello-world">
		<div> Hello World. I'm Quark! Yayyy!!!</div>
		<div class="emoji">😊</div>
	</div>
</div>

######## In the index.css file

.hello-container {
    font-weight: 900;
    display: block;
    height: 100%;
    background: #000000;## }

.hello-world {
    font-size: 50px;
    background-color: #000000;##     height: 100%;
    text-align: center;
    padding-top: 260px;
}

.emoji {
    font-size: 110px;
    animation: rotation 2s linear;
    animation-delay: 1s;
}

@keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(359deg);
    }
}

######## In the setup.js file

import html from './index.html';
import './index.css';

const element = quark.util.createElementFromHtml(html);
const view = quark.views.createTabsView('Hello World', element);
view.focus();

quark.util.setAppTheme({
    "background.dark": "#0D0A0B",##     "on.background.dark": "#ffffff",## 
    "background.default": "#0D0A0B",##     "on.background.default": "#ffffff",## 
    "background.light": "#1D1A1B",##     "on.background.light": "#ffffff",## 
    "background.divider": "#4D4A4B",## 
    "primary.default": "#25d55f",##     "on.primary.default": "#000000",## 
    "secondary.default": "#ff7246",##     "on.secondary.default": "#000000"## });

Working

The index.html and index.css files are pretty straight forward. We are simply creating an HTML template and assigning some styles corresponding to it.

For the setup.js file, let us explore different sections of the programe one by one.

1. Import statements

import html from './index.html';
import './index.css';

Here, we are importing the html template from the index.html file. Behind the scenes, this import statement is handled by the webpack's raw-loader, which return the raw content of the html file.

In the second statement, we are importing the index.css file. Behind the scenes, this import statement is handled by the webpack's css-loader and style-loader. The effect of this import statement is that these styles are automatically injected in the DOM.

2. Creating the view

const element = quark.util.createElementFromHtml(html);
const view = quark.views.createTabsView('Hello World', element);
view.focus();

This part is very specific to the Quark API. Use this API to control various aspects of the application like controlling the window state, showing system notifications, system dialogs and controlling the views.

All of this is API is available under the global namespace quark and no import statement is required to use this object. You can find the complete API references here.

In the current example, we are using the createElementFromHtml## method, which returns an HTMLElement from a template string.

The second method that we use is createTabsView## where we pass the name of the view (Hello World) and the HTMLElement as arguments. After the build, we will see the effect of this method.

3. Setting an app theme

quark.util.setAppTheme({
    "background.dark": "#0D0A0B",##     "on.background.dark": "#ffffff",## 
    "background.default": "#0D0A0B",##     "on.background.default": "#ffffff",## 
    "background.light": "#1D1A1B",##     "on.background.light": "#ffffff",## 
    "background.divider": "#4D4A4B",## 
    "primary.default": "#25d55f",##     "on.primary.default": "#000000",## 
    "secondary.default": "#ff7246",##     "on.secondary.default": "#000000"## });

This is another utility method that we use to set the applications theme by providing with some variables.

Building and running the project

As described in the previous tutorial, build the project by pressing the build button, and then run the project by pressing the run button.

Showcase

All docs on one page.

System resource monitor

Monitors system resources. View CPU loads, memory usage, process explorer.

Digital control systems

Digital control system made with Arduino UNO using pre-installed serialport library.

Plot Charts

Plot charts using plotly.js

Stock analyzing app

Analyze historic/real-time stock data.

News App

News app with multiple country and source filter.

Web Browser

Web browser with multiple tabs, split view support. (Written under 200 lines of code!!)

Note

Find these projects on Github

References

app

Provides methods to perform lower level operations.

app.showItemInFolder([fullPath])

Show the given file in a file manager. If possible, select the file. If no path is provided, opens the current process path.

returns void

app.beep()

Play the beep sound.

returns void

app.getAppMetrics()

Gets the ProcessMetric` object;

returns ProcessMetric

app.getAppPath()

Gets the installation path of the app.

returns string

app.getVersion()

Gets the current version of app.

returns string

app.showMessageBox(title, message, buttons[, type])

Shows a message box. Returns a promise that resolves to the text of the selected button.

arguments
- title string
- message string
- buttons Array<string>
- type ("none" | "info" | "error" | "question" | "warning") (optional)
returns Promise<string>
Usage

quark.app.showMessageBox('Select your hero', 'Superman or Batman?', ['Superman', 'Batman'], 'question')
.then((hero)=>{
    if(hero == 'Superman'){
        console.log('Meh!');
    }else {
        console.log('Yuss!');
    }
}).catch((err)=>{
    console.log(err);
});

app.showErrorBox(title, content)

Shows an error box.

arguments
- title string
- content string
returns void
Usage

quark.app.showErrorBox('Connection Failed!','Failed to connect to board at COM port 5');

app.showOpenDialog([options])

Shows a file/folder open dialog.

arguments
- options OpenDialogOptions(optional)
returns Promise<{ filePaths: Array<string>, bookmarks: Array<string> }?
Usage

quark.app.showOpenDialog({
    title : 'Open Logs',
    defaultPath : 'C://User/Desktop',
    properties : ['openFile', 'multiSelections']
}).then((result)=>{
    const filePaths = result.filePaths;
    const bookmarks = result.bookmarks;
    console.log(filePaths, bookmarks);
}).catch((err)=>{
    console.log(err);
});

app.showSaveDialog([options])

Shows a save dialog.

arguments
- options SaveDialogOptions
returns Promise<{ filename: string, bookmark: string }>
Usage

quark.app.showSaveDialog({
     title : 'Open Logs',
    defaultPath : 'C://User/Desktop'
}).then((result)=>{
    const filename = result.fileName;
    const bookmark = result.bookmark;
    console.log(fileName, bookmark);
}).catch((err)=>{
    console.log('user dismissed the dialog');
});

util

Utilitiy methods to quark api.

util.createContextMenu(items)

arguments
- items Array<MenuItem>
returns ContextMenuRef

util.createElementFromHtml(html)

Creates an HTML element from string.

arguments
- html string
returns Element

util.createFileSystemWatcher(path[, options])

Creates a file system watcher.

arguments
- path string | Array<string>
- options WatchOptions(optional)
returns Watcher

util.createInputBox()

Creates an Input box

returns InputBox

util.createMainMenuItem(label, items[, priority])

Creates a main menu item.

arguments
- label string
- items Array<MenuItem>
returns MenuRef

util.createOutputChannel(name)

Creates an output channel.

arguments
- name string
returns OutputChannel

util.createQuickView(name)

Creates a quick view pannel. Similar to the one used by commands.

arguments
- name string
returns IQuickPick

util.createSnackbar(message[, type, duration])

Creates a snackbar notification.

arguments
- message string
- type 'danger' | 'success' | 'warning' | 'info'
- duration number
returns SnackbarItem <!--

util.createVueWebComponent(name, data, createElement)

Creates a vuejs web component.

arguments
- name string
- data Vue.ComponentOptions<any>
- createElement boolean
returns undefined | HTMLElement -->

window

Controls for window state of your app.

window.blur()

Removes focus from the window.

returns void

window.center()

Moves window to the center of the screen.

returns void

window.close()

Try to close the window. This has the same effect as a user manually clicking the close button of the window.

returns void

window.focus()

Focuses on the window.

returns void

window.getBounds()

Returns the position and size of the current window.

returns Rectangle

window.getOpacity()

Gets the opacity of the current wondow.

returns number

window.hide()

Hides the current window.

returns void

window.maximize()

Maximizes the window. This will also show (but not focus) the window if it isn't being displayed already.

returns void

window.minimize()

Minimizes the window. On some platforms the minimized window will be shown in the Dock.

returns void

window.reload()

Reloads the current windiw.

returns void

window.restore()

Restores the window from minimized state to its previous state.

returns void

window.setAlwaysOnTop()

Sets whether the window should show always on top of other windows. After setting this, this window will always stay on top of other windows.

returns void

window.setBounds(bounds[, animate])

Resizes and moves the window to the supplied bounds. Any properties that are not supplied will default to their current values.

arguments
- bounds - Rectangle
- animate - boolean(optional) macOS
returns void
Usage

quark.window.setBounds({
    height : 600,
    width : 600,
    x : 0,
    y : 0
});

window.setEnabled([enabled])

Disable or enable the window.

arguments
- enabled boolean
returns void
Usage

quark.window.setEnabled(true);

window.setOpacity(opacity)

Sets the opacity of the window. On Linux does nothing. Value must be between 0-1.

arguments
- opacity number
returns void
Usage

quark.window.setOpacity(0.5);

window.setProgressBar(progress[, mode])

Focuses on the window.

arguments
- progress number
- mode ('none' | 'normal' | 'indeterminate' | 'error' | 'paused')Windows
returns void

quark.window.setProgressBar(0.3);

//Or for windows
quark.window.setProgressBar(0.4, 'error');

window.isResizable()

Returns whether the window is resizable or not.

returns boolean

window.setResizable(resizable)

Sets the window as resizable or not resizable.

argumants
- resizable boolean
returns void

window.show()

Shows and gives focus to the window.

returns void

window.unmaximize()

Unmaximizes the window.

returns void

window.capturePage(callback)

Captures a snapshot of the whole visible page. Upon completion callback will be called with callback(image). The image is an instance of NativeImage that stores data of the snapshot.

arguments
- callback (image : NativeImage) => void
returns void
Usage

quark.window.capturePage((image) => {
    //your code here, example:
    console.log(image);
});

window.executeJavaScript(code)

Evaluates code in page. Returns a promise with the result of the executed code.

arguments
- code string
returns Promise<any>
Usage

const code = `
    console.log('Hello');
`
quark.window.executeJavaScript(code).then((result)=>{
    console.log(result);
}).catch((err)=>{
    console.log(err)
});

window.getFrameRate()

Returns the frameRate of the window

returns void

window.getZoomFactor()

Gets the current zoom factor and returns a promise that resolves to the value of zoom factor.

returns Promise<number>
Usage

quark.window.getZoomFactor().then((factor)=>{
    //Your code here; example:
    console.log(factor);
}).catch((err)=>{
    console.log(err)
});

window.getZoomLevel()

Gets the current zoom level and returns a promise that resolves to the value of zoom level.

returns Promise<number>
Usage

quark.window.getZoomLevel().then((level)=>{
    //Your code here; example:
    console.log(level);
}).catch((err)=>{
    console.log(err)
});

window.insertCSS(css)

Injects css into the current web page.

arguments
- css string
returns void
Usage

const css = `
    my-element {
        background-color : red;
    }
`
quark.window.insertCSS(css);

window.setZoomFactor(factor)

Changes the zoom factor to the specified factor. Zoom factor is zoom percent divided by 100, so 300% = 3.0.

arguments
- factor number
returns void
Usage

quark.window.setZoomFactor(0.3);

window.setZoomLevel(level)

Changes the zoom level to the specified level. The original size is 0 and each increment above or below represents zooming 20% larger or smaller to default limits of 300% and 50% of original size, respectively. The formula for this is scale := 1.2 ^ level.

arguments
- level number
returns void
Usage

quark.window.setZoomLevel(0.5);

views

Create and control views of your app.

views.createSideView()

Creates a side view.

returns ViewProvider

views.createBottomView()

Creates a bottom view.

returns ViewProvider

views.createTabsView()

Creates a tabs view.

returns ViewProvider

commands

commands.registerCommand(id, handle[, thisArg, label])

Registers a globally executable command.

arguments
- id string
- handle Function
- thisArg any(optional)
- label string(optional)
returns IKeyBindingRegister
Usage

Registering a command.

quark.commands.registerCommand('my.awesome.command.id', () => {
    console.log('I ran');
});

quark.commands.executeCommand('my.awesome.command.id');
//logs `I ran` to console.

Adding a KeyBinding to the command.

const register = quark.commands.registerCommand('my.awesome.command.id', () => {
    console.log('I ran');
});
register.addKeyBinding('ctrl+i');
//Now pressing the key combination "ctrl+i" will invoke the command.

Passing arguments to the command.

quark.commands.registerCommand('my.awesome.command.id', (label) => {
    console.log(label);
});

quark.commands.executeCommand('my.awesome.command.id', 'I ran');
//logs `I ran` to console.

Adding command to the commands palette.

The example below shows how to add a command to the commands palette. The only thing you need to do differently is to provide the label argument to the commands.registerCommand function.

quark.commands.registerCommand('my.awesome.command.id', () => {
    console.log('I ran');
}, null, 'My Awesome Command');

Now the command should be available in the commands palette like so.

registered-command

commands.executeCommand(id, [...args])

Executes a registered command.

arguments
- id string
- ...args any
returns void

commands.getCommand(id)

Returns a registered command with the provided id.

arguments
- id string
returns ICommand | undefined
Usage

//e.g. Getting a command and then disposing it.
const command = quark.commands.getCommand('my.awesome.command.id');
command.dispose();
//unregisters the command

commands.getAllCommands()

Returns an array of all the registered commands.

returns Array<ICommand>
Usage

//e.g. filtering all commands registered in commands palette.
const commands = quark.commands.getAllCommands().map((command) => {
    if(command.label) {
        return command;
    }
});

storage

Store data

inMemory

Store temporary data in memory while your code is running. As soon as the window is closed, all data is lost. The data may or may not be JSON serializable.

see MemoryStore

local

Store data locally in an external file. File is created on per project basis. You can only store JSON serializable data.

see PersistantStore

global

Store data locally in an external file. Common for a system. You can only store JSON serializable data.

see PersistantStore

clipboard

Perform copy and paste operations on the system clipboard.

clipboard.readText()

Returns the text saved in clipboard.

returns string

clipboard.writeText(text)

Writes text to clipboard.

arguments
- text string
returns void

clipboard.readHTML()

Returns the markup saved in clipboard.

returns string

clipboard.writeHTML(text)

Writes markup to the clipboard.

arguments
- text string
returns void

clipboard.clear()

Clears the text saved in clipboard.

returns void

icons

icons.registerIcon(icon)

Registers an icon in global icon namespace.

arguments
- icon Icon
returns void
Usage

quark.icons.registerIcon({
    name: 'my-custom-icon',
    path: './my-custom-icon.svg'
});

const view = quark.views.createSideView('my-side-view', document.createElement('my-custom-element'));
view.icon = 'my-custom-icon';
view.focus();

icons.registerIcons(icons)

Registers multiple icons in global icon namespace.

arguments
- icons Array<Icon>
returns void

icons.registerIconInNamespace(icon, namespace)

Registers an icon under a namespace.

arguments
- icon Icon
- namespace string
returns void
Usage

quark.icons.registerIconInNamespace({
    name: 'my-custom-icon',
    path: './my-custom-icon.svg'
}, 'my-namespace');

const view = quark.views.createSideView('my-side-view', document.createElement('my-custom-element'));
view.icon = 'my-namespace:my-custom-icon';
view.focus();

icons.registerIconsInNamespace(icons, namespace)

Registers multiple icons under a namespace.

arguments
- icons Array<Icon>
- namespace string
returns void

Tip

Quark comes pre installed with Material icons and Ionicons. You can use them in your views as follows:

/*
 * Using material icons.
 * All material icons are registered under the namespace 'mat'
 */

const view = quark.views.createSideView('my-material-icon-view', document.createElement('my-custom-element'));
view.icon = 'mat:close';

/*
 * Using ionicons.
 * All ionicons are registered under the namespace 'ionicon'
 * 
 * Important: You also have to specify the platform of the icon. i.e. 'md-' or 'ios-' before the name of the icon.
 * e.g. 'ionicon:md-close' would work but 'ionicon:close' would not.
 */

const view = quark.views.createSideView('my-ionicon-view', document.createElement('my-custom-element'));
view.icon = 'ionicon:md-close';

Structures

ViewProvider

Methods

dispose()

Removes the view

returns void

isVisible()

Returns boolean.

returns void

hide()

Hides the view.

returns void

show()

Shows the view.

returns void