@hexcanvas/svelte

hexcanvas.htcom.org · Repository

The Svelte binding for HexCanvas, a hex viewer and editor painted on a canvas. It is an action over the <hexcanvas-editor> custom element rather than a component, so the package needs no compiler and no Svelte dependency — and the editor chrome stays in the element, where the React and Vue bindings share it.

npm install @hexcanvas/svelte @hexcanvas/core

<script lang="ts">
  import { hexEditor } from "@hexcanvas/svelte";
  import { MemoryByteSource } from "@hexcanvas/core";

  const source = new MemoryByteSource(bytes);
</script>

<hexcanvas-editor use:hexEditor={{ source, byteGroup: 4 }} on:change={markDirty} />

The action expects a <hexcanvas-editor>; applied to any other element it upgrades nothing and throws instead of silently doing nothing. To mount one yourself — outside a template, or into a container you already have:

import { createHexEditor } from "@hexcanvas/svelte";

const element = createHexEditor(container, { source, editMode: "read-only" });
element.engine.findAllMatches();

Options

HexEditorOptions takes source (required — a ByteSource from @hexcanvas/core, or the older synchronous BinaryBuffer), plus bytesPerRow, rowHeight, addressRadix ("hex" or "decimal"), byteGroup (1, 2, 4 or 8), font, editMode ("read-only", "overwrite" or "insert"), theme, and onEngine — which hands over the HexEngine for driving search, history or the cursor. Reassigning the options object applies the difference to the element the action is on.

Events come from the element itself, so listen for change, cursorchange and selectionchange the ordinary way.

Styling

There is no stylesheet to import. Appearance reads --hexcanvas-* custom properties declared anywhere above the editor, and the chrome — living in a shadow root — is restyled through ::part().

The element adopts those styles as a constructed CSSStyleSheet rather than appending a <style>, so an app with a strict style-src needs no nonce and no hash. From 0.2.0 that sets the browser floor: Chrome 73, Firefox 101 and Safari 16.4.

hexcanvas-editor { --hexcanvas-bg: #fff; --hexcanvas-selection: #bcd9ff; }
hexcanvas-editor::part(panel) { border-radius: 0; }

The full list of custom properties, the keymap, the byte sources and the decoration API are in the repository README.

Licence

MIT. See LICENSE.