Introducing Quarkc: A Framework‑Agnostic Web Component Toolkit

In October last year we open‑sourced Quarkd, and after receiving over 1,600 stars we decided to further open source Quarkc, the core of the Quark ecosystem.

Quarkc is a framework‑agnostic component construction tool developed by the HelloBike front‑end team. It builds components based on native Web Components APIs, requiring no AST processing or hidden magic, enabling “write once, run anywhere”.

Key goals: make components independent of any front‑end stack, reduce development and maintenance cost, and allow a single codebase to serve multiple frameworks such as Vue, React, Svelte, Angular.

Features include cross‑stack compatibility, tiny bundle size, high performance via native browser APIs, no runtime framework, Shadow DOM + Virtual DOM integration, and modular on‑demand usage.

Installation:

npx create-quark-app create project-name

cd project-name

npm install

npm start

Creating a custom element:

import { QuarkElement, property, customElement } from "quarkc"

import style from "./index.less?inline"

@customElement({ tag: "my-element", style })

export default class MyElement extends QuarkElement {

@property() count

add = () => { this.count += 1 }

render() { return (
count is: {this.count}
) }

}

Usage examples across frameworks:

<my-element count="5" />

(plain HTML)

<my-element :count="5" />

(Vue)

<my-element count={5} />

(React)

<my-element {count} />

(Svelte)

<my-element [count]="5" />

(Angular)

The library has been demonstrated at the Beijing Rare Earth Developer Conference on 2023‑06‑30, and performance benchmarks show a small bundle size with fast rendering.

Full documentation and examples are available at https://quark.hellobike.com and the source code on GitHub https://github.com/hellof2e/quark.

Community discussion can be joined via the Quark technical exchange group (contact details in the original announcement).