# vfunc

> UI as plain functions. A no-build vanilla JavaScript library: keep your HTML, control only what you need.

Latest version **1.0.0-rc.1** (published 2026-09-23) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install vfunc
pnpm add vfunc
yarn add vfunc
bun add vfunc
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.0.0-rc.1 |
| Published | 2026-09-23 |
| First published | 2026-09-23 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 603 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | vidkid |
| Maintainers | vidkid |
| Keywords | vanilla, javascript, ui, no-build, spa, ai-friendly, html |

## Links

- npm: https://www.npmjs.com/package/vfunc
- Repository: https://github.com/vidkid-indy/vfunc
- Homepage: https://github.com/vidkid-indy/vfunc#readme
- Issues: https://github.com/vidkid-indy/vfunc/issues
- npm.io page: https://npm.io/package/vfunc

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 1.0.0-rc.1 (latest) — 2026-09-23
- 1.0.0-rc.5 (next) — 2026-09-24
- 1.0.0-rc.4 — 2026-09-24
- 1.0.0-rc.3 — 2026-09-24
- 1.0.0-rc.2 — 2026-09-24

## README

# vfunc.js

**UI as plain functions. No build, no virtual DOM — one script file.**

[한국어](README.ko.md)

> **Status: in development (Phase 0).** The first public release (1.0) is being prepared. The API described here is planned and may change until 1.0.

vfunc.js is a small vanilla JavaScript library for building interactive pages and single-page apps.
Its core idea: **keep your HTML as it is, and turn only the parts you need to control into vfunc components.**

- **No build step** — load one `<script>` and start. No bundler, no JSX, no transpiler.
- **Works with published HTML** — attach behavior to markup your designers or publishers already made.
- **Easy for AI to write** — a small, explicit API (`state`, `render`, `delegates`, `methods`) that language models generate correctly. Prompts and an `llms.txt` reference ship with the project.
- **SPA ready** — a tiny router, store, and i18n are included.
- **Design-independent** — logic and design are separated, so a design can be applied later by changing CSS tokens only.

## Planned usage

```html
<div id="counter"></div>
<script src="https://cdn.jsdelivr.net/npm/vfunc@1.0.0/dist/vfunc.min.js"
        integrity="sha384-..." crossorigin="anonymous"></script>
<script src="app.js"></script>
```

```js
// app.js
const counter = vf.vfunc({
  state: { count: 0 },
  render: (s) => vf.html`<button data-action="inc">Clicked ${s.count} times</button>`,
  delegates: [{ selector: '[data-action="inc"]', eventType: 'click',
                onEvent: (e) => e.sender.setState({ count: e.sender.state.count + 1 }) }]
});
counter.mount(document.getElementById('counter'));
```

## Layers

| Layer | Contents | Status |
|---|---|---|
| layer1 | The engine `vf.vfunc` and helpers (`attach`, `html`, `router`, `store`, `i18n`) | In development |
| layer2 | Class-free components (`vs*` returns a string, `vf*` returns an instance), grid, chart, third-party adapters | Planned |
| layer3 | Class-based framework (`VClass`) and tools | Planned |

## Browser support

Current versions of Chrome, Edge, Firefox and Safari. A separate legacy build (`vfunc.legacy.min.js`) is planned for Internet Explorer 11 and Edge IE mode.

## Contributing and security

- [CONTRIBUTING.md](CONTRIBUTING.md) — contributions are accepted under the DCO (`Signed-off-by`).
- [EXTENDING.md](EXTENDING.md) — how to extend vfunc without modifying it.
- [SECURITY.md](SECURITY.md) — report vulnerabilities privately, not in public issues.

## License

[Apache License 2.0](LICENSE). If you redistribute vfunc.js, keep the header comment in the distributed files and the [NOTICE](NOTICE) file.

---
_Source: https://npm.io/package/vfunc · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._