@bigmistqke/solid-hex-editor

minimal hex-editor

https://github.com/user-attachments/assets/88b8874d-63f7-4a2a-97d4-e504385deee4

Quick start

Install it:

npm i @bigmistqke/solid-hex-editor
# or
yarn add @bigmistqke/solid-hex-editor
# or
pnpm add @bigmistqke/solid-hex-editor

Use it:

import { HexEditor } from '@bigmistqke/solid-hex-editor'

const [array, setArray] = createSignal(
  new Uint8Array(Array.from({ length: 50 * 50 * 3 }, (_, i) => i % 255)),
  { equals: false },
)
render(
  () => (
    <HexEditor
      array={array()}
      onArrayUpdate={(index, value) => {
        setArray(array => {
          array[index] = value
          return array
        })
      }}
    />
  ),
  document.body,
)

Style it:

.editor {
  gap: 5px;

  /* data-grid={offset | hex | ascii} */
  & > [data-grid='offset'] {
    color: darkgrey;
  }

  & [data-cell] {
    padding: 2px;
  }
}