Features

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)

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:

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#, Go, Graphviz, Java, JavaScript, Lua, Nim, Perl, PHP, Python, Ruby.

Converter

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

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:

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

Drag & drop files directly into editor

Debugging

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:

Hotkeys

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).

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:

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-parse-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-parse-mode: lazy will make them lazy again).

Opaque type support

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

• 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: