Ngx Hex Editor

A simple and lightweight Hex Editor component for Angular applications. This library allows you to display and edit binary data efficiently, with features such as editable hex values and UTF8 visualization.

Features

• Hex and UTF8 Views: Displays data in both hexadecimal and UTF8 formats.
• Editable Data: Supports modifying individual bytes interactively in place.
• Insert/Delete: Press Insert to insert a new byte before the selected one, or Backspace/Delete to remove byte.
• Pagination: Allows to efficiently edit big byte arrays.
• Responsive: Works well across various screen sizes.

Installation

Install the package using npm or yarn:

npm install ngx-hex-editor

or

yarn add ngx-hex-editor

Usage

1. Import the module in your Angular application:

// app.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { HexEditorModule } from "ngx-hex-editor";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HexEditorModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

2. Use the component in your template:

<hex-editor [data]="data" (dataChange)="handleDataChange($event)"> </hex-editor>

3. Bind data and handle events in your component:

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  data = new Uint8Array([0x48, 0x65, 0x6c, 0x6c, 0x6f]);

  handleDataChange(newData: Uint8Array) {
    this.data = newData;
    console.log("Data updated:", this.data);
  }
}

Options

| Input | Type | Default | Description | | ------------- | ------------ | ------------------ | --------------------------------------------------------- | | data | Uint8Array | new Uint8Array() | Binary data to display/edit. | | readOnly | boolean | false | If true, editing is disabled. | | maxRows | number | 0 | Max amount of rows in the viewport. 0 means unlimited. | | maxColumns | number | 0 | Max amount of columns in the viewport. 0 means unlimited. | | showOffsets | boolean | true | Show global offset for each line (left panel). | | showUtf8 | boolean | true | Show UTF8 representation for each byte (right panel). |

Keyboard Shortcuts

| Shortcut | Description | |----------------------|---------------------------------------------------| | 0-9, a-f / A-F | Edit the selected byte. | | Insert | Insert a new byte (0x00) before the selected one. | | Backspace | Remove the previous byte. | | Delete | Remove the selected byte. | | Tab / Shift+Tab | Navigate between bytes. |

| Output | Type | Description | | ------------ | -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | dataChange | EventEmitter<Uint8Array> | Emits updated data when changes occur. Note: if changes occur in already existing bytes, data is edited in place. If new bytes are appended, then a new Uint8Array is created and emitted. |

Development

To run the development subproject for testing and exploring the library:

1. Clone the repository and install dependencies:

   npm install

2. Run the development server:

   npm run dev

   The development application will be available at http://localhost:4200/. It provides a textarea for Base16 encoded data synced with the hex editor component.

Contributing

Contributions are welcome! Please open an issue or submit a pull request on GitHub.

License

Apache License