The hex editor I used (0xED) doesn't work too well on recent OSX, so why not write our own?
What hex editor needs
While they're called "hex editors", editing is really a minor feature, they're mostly used for viewing binary data.
A hex editor should display the following:
- file name in title
- main display, with byte offsets, hex, and ascii view
- table with common decodings of data at current offset
- footer status bar with at least currently selected offset
How to implement it
After doing previous project in React, we're back to Svelte for this one.
As data we have is all tables, I'll be using <table> everywhere. To complete the project we'll need something that neither display: grid nor <table> can provide, and we'll need to do some JavaScript for layout, but we're not there yet.
For this episode we'll just setup some basic structure and CSS.
src/App.svelte
This component will hold the data, and selection, but for now it's just a placeholder importing three parts of the interface.
Svelte makes it very easy to inject extra content into HTML <head>, we don't need any external libraries for it.
We want Decodings and StatusBar to always be on the bottom, so we make editor 100vh height, and we'll only make the MainView resizable and scrollable.
<script>
import MainView from "./MainView.svelte"
import Decodings from "./Decodings.svelte"
import StatusBar from "./StatusBar.svelte"
</script>
<div class="editor">
<MainView />
<Decodings />
<StatusBar />
</div>
<svelte:head>
<title>fancy-data.bin</title>
</svelte:head>
<style>
:global(body) {
background-color: #222;
color: #fff;
font-family: monospace;
padding: 0;
margin: 0;
}
.editor {
display: flex;
flex-direction: column;
height: 100vh;
overflow: auto;
}
.editor > :global(*) {
background-color: #444;
}
</style>
src/MainView.svelte
<div class="main">
<table>
{#each {length: 200} as _}
<tr>
<td class="offset">012345</td>
<td class="hex">01 23 34 45</td>
<td class="hex">01 23 34 45</td>
<td class="hex">01 23 34 45</td>
<td class="hex">01 23 34 45</td>
<td class="ascii">abcdefghijklmnop</td>
</tr>
{/each}
</table>
</div>
<style>
.main {
flex: 1 1 auto;
overflow-y: auto;
}
table {
width: 100%;
}
tr:nth-child(even) {
background-color: #555;
}
</style>
The data we want to display in each row is - offset, hex data in groups of four bytes, and ASCII decoding for everything in the row.
Odd/even shading really helps read all that data.
This is the component which will eventually need some fancy JavaScript layout, but for now it will do like this.
To make it scrollable, we need to wrap <table> in extra <div>, it's one of the limitations of HTML tables.
src/Decodings.svelte
<table>
<tr>
<th>Type</th>
<th>Value</th>
</tr>
<tr>
<td>Int8</td>
<td>42</td>
</tr>
<tr>
<td>UInt8</td>
<td>-42</td>
</tr>
<tr>
<td>Int16</td>
<td>42,690</td>
</tr>
<tr>
<td>UInt16</td>
<td>-42,690</td>
</tr>
<tr>
<td>Int32</td>
<td>4,269,042,690</td>
</tr>
<tr>
<td>UInt32</td>
<td>-4,269,042,690</td>
</tr>
<tr>
<td>Float32</td>
<td>42.690</td>
</tr>
<tr>
<td>Float64</td>
<td>42.690</td>
</tr>
<tr>
<td>RGBA</td>
<td>rgba(12,34,56,78) <div class="color-box" /></td>
</tr>
<tr>
<td>String</td>
<td>Lorem Ipsum</td>
</tr>
</table>
<style>
table {
margin-top: 8px;
}
th {
text-align: left;
}
tr:nth-child(even) {
background-color: #555;
}
.color-box {
display: inline-block;
vertical-align: middle;
background-color: pink;
border: 1px solid black;
height: 0.8em;
width: 0.8em;
}
</style>
This is a table which will try to decode whatever we're hovering over, or whatever we selected. For now it's mock data.
This is one of the most important features of hex editors, and depending on which formats we're dealing with, we'll want ability to customize which formats to display. For now we can start by pre-selecting a lot of common ones.
src/StatusBar.svelte
This will be an extremely simple component. For now it just displays static data, but even when the offset is dynamic it won't do anything complicated.
<div>
Offset: 1234
</div>
<style>
div {
margin-top: 8px;
}
</style>
Result
Here's the results:
In the next episode, we'll make our hex editor display actual data.
As usual, all the code for the episode is here.
Top comments (0)