Skip to content

docs: framework-free quick start in README #95

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ohxyz merged 1 commit into from
Jun 24, 2026
Merged

docs: framework-free quick start in README #95

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions CONTRIBUTING.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
# Contributing

## Development

Install dependencies, then:

```sh
pnpm install # first time only
pnpm dev # start the dev server
pnpm test # run the tests
```

## Environment

Create a `.env.local` to set the default minimum width/height (in pixels) for a sash:

```sh
# .env.local
VITE_DEFAULT_SASH_MIN_WIDTH=100
VITE_DEFAULT_SASH_MIN_HEIGHT=100
```
68 changes: 54 additions & 14 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,28 +3,68 @@
[![Publish to npm](https://github.com/bhjsdev/bwin/actions/workflows/publish.yml/badge.svg)](https://github.com/bhjsdev/bwin/actions/workflows/publish.yml)
[![npm version](https://img.shields.io/npm/v/bwin)](https://www.npmjs.com/package/bwin)

A lightweight window-tiling JavaScript library for the browser, featuring resizable panes, drag-and-drop, and more.
A lightweight window-tiling JavaScript library for the browser, featuring resizable panes, drag-and-drop, and more. Works with any framework or none.

[![A bwin tiling layout with resizable panes showing charts and a data table](docs/screenshot.png)](https://bhjsdev.github.io/bwin-docs?theme=light)

[Documentation](https://bhjsdev.github.io/bwin-docs/javascript/get-started)
## Quick start

## Development
Drop this into an `.html` file and open it in your browser — no build step required:

Install dependencies, then:
```html
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bwin@latest/dist/bwin.css" />
<script type="importmap">
{ "imports": { "bwin": "https://cdn.jsdelivr.net/npm/bwin@latest/dist/bwin.min.js" } }
</script>
<script type="module">
import { BinaryWindow } from 'bwin';

```sh
pnpm install # first time only
pnpm dev # start the dev server
pnpm test # run the tests
```
const element = document.createElement('em');
element.innerHTML = 'Hello World';

const bwin = new BinaryWindow({
width: 400,
height: 300,
children: [
{ position: 'left', size: 200, content: element },
{
position: 'right',
children: [
{ position: 'top', size: '40%' },
{ position: 'bottom', size: '60%' },
],
},
],
});

### Environment
bwin.mount(document.getElementById('container'));
</script>
</head>
<body style="margin: 0">
<div id="container"></div>
</body>
</html>
```

Create a `.env.local` to set the default minimum width/height (in pixels) for a sash:
To install from npm instead:

```sh
# .env.local
VITE_DEFAULT_SASH_MIN_WIDTH=100
VITE_DEFAULT_SASH_MIN_HEIGHT=100
npm install bwin
```

```js
import { BinaryWindow } from 'bwin';
import 'bwin/bwin.css';
```

Installing from npm means using a bundler (Vite, webpack, Rollup, etc.) to build your app.

## Documentation

Full guides and API reference: [bhjsdev.github.io/bwin-docs](https://bhjsdev.github.io/bwin-docs/javascript/get-started)

## Contributing

See [CONTRIBUTING.md](CONTRIBUTING.md) for local development setup.