Tamás Koczka edited this page Sep 20, 2017 · 13 revisions

This page is about the features of the Kaitai WebIDE. If you are interested in what Kaitai is and/or like to learn more about the .ksy file format please visit kaitai.io or the User Guide.

You can make new feature suggestions on the issues page. (But please check the existing issues before, especially the wishlist)

File tree

It supports basic features you would expect from a file store: you can upload, download, move, rename (F2), delete files and folders.

There are two main nodes:

  • kaitai.io is a read-only repository of samples and formats (you can send pull requests here)
  • Local storage is your browser's storage, your files will be stored here, make sure you make backup from time to time (as we are NOT storing your files on any server)

Screencast of file tree

You can access some more advanced functionality only from here, for example the parser code generator (see below).

Field selection

If you select an object or field in the tree view then the underlying bytes will be selected in the hex view and vica versa:

Screencast of field selection feature

Generate file parser for your favorite language

By right-clicking on any .ksy file in the file browser you can generate parser code for various languages: C++ (STL), C#, Graphviz, Java, Javascript, Perl, PHP, Python, Ruby.

Generate parser feature


Converts bytes to signed / unsigned, little / big endian integer representations, float, double, shows data in various string encodings (ASCII, UTF-8, UTF-16).

Converter feature

Save bytes from hex view

By right-clicking in hex view and selecting "Download" in the popup menu you can save the selected bytes as a binary file:

Screencast hex view byte save feature

You can also drag and drop back this partial file to further inspection.

Drag & drop files directly into editor

Drag & drop feature


By adding debugger; into the generated code in the JS code (debug) tab and pressing Ctrl+Enter, you can break the parsing process at various points and make further inspections, access parsing state variables, etc:

Debugging feature


The WebIDE uses the awesome Ace (Ajax.org Cloud9) Editor, so you use its Keyboard Shortcuts.

For large projects, folding all nodes can be really helpful ("Fold all" => Windows: Alt-0, OSX: Command-Option-0).

Folded ksy viewer

WebIDE representation

You can use the -webide-representation attribute to show a quick overview of your objects.

Here is an example what I am talking about:

webide-representation example

The Mach-O file format is a great example to get some ideas from.

You can use :dec to format your property as a decimal number, or :hex to format as hexadecimal (although it's the default setting). You can also use custom separator for arrays with :sep=, or format byte arrays as strings with :str.

Eager instance parsing

Instances are parsed lazily by default, but you can change this behavior, if you add -webide-parsing-mode: eager to your instance description.

In the future we will probably change the parsing behavior of value instances: they will be parsed eagerly by default (-webide-parsing-mode: lazy will make them lazy again).

webide-parsing-mode example

Opaque type support

Currently the opaque type support is really rudimentary, but for the braves here is a guide how to use it:

  • Use the development version of the WebIDE (at least until v0.8 is released)
  • Open the Developer Tools (usually F12 or Ctrl+Shift+I)
  • Insert your custom type the following way:
localStorage.setItem("userTypes", `class TestType {
    constructor() { }
    _read() {
        this.something = 5;
        this._io = {};
        this._debug = {};
this.TestType = TestType;`);
  • Add ks-opaque-types: true to the meta node

You should get something like this:

Opaque types usage

Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.