Quark – A software sketchbook for your projects

After almost an year of hard work, I’m excited to finally announce Quark! You can check it out now over at https://quarkjs.io :tada:

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.

Why?

The idea of Quark started when I was pursuing my degree in Engineering and felt a need for a software tool that would help me do things like — plot charts, app prototyping, create dashboards/GUI’s for my personal projects etc. I just needed “some place” to write my code, build small projects or test new ideas. To much of my own surprise, I could not find an easy way to do so. Hence, I decided to create this project.

How does it work?

Simply Said: Quark is 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! :open_mouth:

The IDE automatically takes care of transpiling and bundling your project behind the scenes and emits a single output file which you can “double-click” on to open and run your project. We call these output files, “sketches”.

See the process in action —

In the demo above, we open the Quark app, create a new empty project, build and then run the project. All done in less than 15 seconds !!

“Sketches” = Electron apps on a diet. :apple:

As you might have already guessed, Quark is built upon the Electron framework . Your sketches provide you with all the capabilities of full fledged electron apps . The only 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!

Features :sparkles:

Code Editor :memo:

Quark comes built in with a powerful code-editor. The same code editor that powers the VS Code ( monaco-editor ) . This means you get out of the box support for Intellisense, code completion, “Go to Definition”, reference search and Quick navigation (Cmd+P).

Also the editor supports around 80 different settings that you can configure to customize your editing experience.

Module Bundler ️

Quark comes pre-installed with webpack and babel support, along with their complimentary utilities like webpack-loaders(css-loader, html-loader, raw-loader etc.). This means that you get out of the box support for modern JavaScript, React and TypeScript without even writing a single config file. You can also optionally choose to write a config file and customize the build system to suit your own needs.

Integrated Terminal :computer:

NPM Client :package:

We have a built-in npm client so you can install dependencies and packages that you need to develop your application.

In-memory File System :file_folder:

A Quark project exists as a single file on your machine. 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.

Application Packager ️

Module bundlers are good but they cannot always package your application assets (e.g. images, videos). Well, in that case we also support an archive format. This means that you still share only one single file, to share your entire project.

Power of Electron :muscle:

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

Showcase :eyes:

Following are some of the sketches built with Quark —

System Resource Monitor

Monitor system resources like CPU/Memory Usage. Built using chart.js and systeminformation library.

Digital Control Systems

A control system for your Arduino projects. Built using node-serialport library.

Web Browser

A split-view and multi-tabbed web browser. To much of my own surprise, this sketch was built just under 200 lines of code !!

Plot Scientific Charts

Plot advanced charts using plotly.js library.

Stock analyzing app

Analyze real-time/historic stock data. Uses Alpha Vantage API.

More use cases

If you still don’t get the picture, here are some more ideas and use-cases that you can use Quark for.

• Replace the middleman “localhost” for all your existing node projects. Directly write your Node.js code in the DOM.
• Convert existing command line interfaces(CLI) to graphical user interfaces(GUI). e.g. build GUI client for Angular, Vue.js CLI.
• Build utility projects like image converter, video converter using existing node packages like imagemin , fluent-ffmpeg etc.
• Create graphical dashboards to consume vast amounts of numeric data from various API’s. e.g. create usage explorer dashboard for google-cloud usage metrics.

The future is bright :star2:

There are a ton of awesome features coming soon. One of the main things we want to accomplish is to create an open repository of sketches built with Quark.

Imagine an open library of utility applications like image converter, video converter, To-Do app, sticky-notes app etc. that you can download on your machine at the press of a button, all providing functionality as that of full fledged electron apps while consuming resources as that of only one. This means you can potentially have hundreds of utility applications downloaded on your machine at any given time. This could lead to a massive boost in users productivity.

We’re also rapidly working on open sourcing the core tech behind Quark. Meanwhile, you can contribute to the documentation and website which is already open-sourced on our GitHub repo.

Can’t wait to see what you awesome people on the internet have to say about Quark — feel free to tweet me @nishkalkashyap or DM me on Instagram with your questions, feedback and ideas. :smile:

I’ll leave you now with a few relevant links below. Hope it makes your life a little bit easier, just as it has made mine!

• Download Quark: https://quarkjs.io/download/
• GitHub: https://github.com/Nishkalkashyap/Quark-docs
• Showcase: https://quarkjs.io/guide/showcase.html
• Getting Started: https://quarkjs.io/guide/getting-started.html