Documentation

The Complete Typstify Handbook

Find answers to common questions and browse our versioned documentation.

QuickGuide-v1.5

QuickGuide-v1.5

Start a project

Typstify provides 3 kinds of project to help you get started.

  • Document: Generate a project skeleton or using Typst template for your papers, documents.
  • Package: Generate a project skeleton for your Typst package. For developers only.
  • Template: Generate a project skeleton for your Typst template. For developers only.

If you are not sure, select the first one.

Existing projects can also be opened from the disk by clicking the “Open folder” icon.

Packages & Templates

Typstify has built-in repositories viewer for Typst packages & templates. It synchronizes with the public Typst packages & templates. If you want to find some beautiful templates, or packages to use, check it out.


Editing

The editor support highlighting syntax of a wide range of programming languages. Tab kind and width can be configured from the setting page for newly created file. For existing files, it detects and sets them.

Shortcuts

Tystify editor tries to be efficient and provides some useful keyboard shortcuts for editing. For the full set of shortcuts supported, check the Keyboard shortcuts section.

Multiple Files Edit

Sometimes your Typst file is splitted into multiple files and include the smaller files in one entry file. Or you are using import to use some local package files. If you are working on those files back and forth, you can switch between them from the breadcrumb at the top of the editor, without opening multiple editor tabs.

Indentation

When creating new files from within Typstify, the indentation setting from the Setting page is applied. For existing files, the indentation is automatically detected from its content. It’s also possible to change the indentation for the files you are editing, by clicking the Tab or Spaces area in the status bar.

To prevent from mixed use of tab and spaces style indentation, you have the choice to convert between them when changing the indentation.

Auto-Completion

Since v1.5.0, Typstify has a built-in Typst language server. One of the most important features that comes with this version is basic auto-completion. Auto-completion is always on and it works as you type.

As it uses TinyMist as LSP server, the trigger characters are the same as TinyMist. Currently, the trigger characters used by TinyMist are:

  1. Any valid identifier character, like a or Z.
  2. #, (, <, ., :, /, ", @, which is configured by LSP server.

Snippet mode

During auto-completion, when some candidate is selected, the editor may enter into the snippet mode if there are some “tab stops” to be filled by the user. Surrounding boxes will be shown at the tab stops with content. To navigate through the tab stops, you can:

  • Press Tab key to navigate forward.
  • Press Shift+Tab keys to navigate backward.
  • If the cursor is at the position of last or first the tab stop, one more Tab or Shift+Tab will put the cursor at the 0th tab stop (usually the end of the snippet), and quit the snippet mode.

At any time during snippet mode, clicking in the editor or pressing ESC key will turn the editor to normal mode.

Hover tips

Hover tips show information about the symbol/object that’s below the cursor. This is usually the type of the symbol and a description, or the signature of the function/method.

Diagnostic tips

When there is something wrong with the syntax, a squiggly line will be shown under the text. To examine what’s wrong, you can hover your mouse cursor over the text to see the tips.


Preview

Typstify does not provide a “Build” or “Compile” button, it has Preview instead. To build your Typst files, open it in the editor and click the “Preview” button located at the top right corner, the file will be watched and compiled every time the file is updated.

The previewer supports one direction navigation. Users can click text in the editor, and the previewer will scroll to the corresponding text location for you.

By default, Typstify uses built-in previewer, you can also switch to the browser based previewer if you like. Please go to the General setting tab to enable it if you would like to.


Export

Another way to compile and view the output is to export it. The Export button can also be found at the top right corner.

Exported files will be put in the “output” sub-folder in the same folder as your Typst files. Multiple files would be generated for your project if you export PNGs or SVGs. Since V1.5.0, there is an option to export HTML, but it is better to treat it as experimental for now.


Settings

Typstify uses the root dir of the workspace as TYPST_ROOT, for LSP server, previewing and exporting. You can put all related files, resources in it, so they can be searched and used.

sys.inputs

In order to read data via Typst’s sys.inputs dictionary, Typstify uses a sys-inputs.json file to provide data. The file format is expected to be JSON, and all keys and values are expected to be string. Besides of that, it must be placed at the root dir of the workspace.

If you don’t want your project to read such file, you can disable it in the Typst tab of the Setting page.

Fonts

Fonts used by Typst compiler and LSP server can be configured in several ways.

  • If the fonts dir is outside of the workspace, you can specify it in the Extra Font Path field of the Typst setting page.
  • Fonts placed in the workspace root folder or any sub-folders can be searched and used in your Typst files.
  • Fonts installed system-wide can be picked up if you have the Ignore System Fonts off.
  • Fonts built-into the Typst compiler can be used of you have the Ignore Compiler Embedded Fonts off.

Debug log

Debug log from the LSP server and Typst compiler is redirected to the console of Typstify. You can check it at any time by clicking the info icon in the status bar.

The debug log may be annoying, and also consumes resources if there is too much log. You can turn it off in the General tab of the setting page.

Power saving mode

The LSP server may consume lots of CPU and memory resources if you are working on large projects. And also the overhead for frequent compiling, code analysis can be too much for battery powered laptops or any other resource constraint devices. Tinymist introduces the syntax-only mode since v0.14, if enabled, previewing and some other functionalities will not work. In Typstify you can enable it by turn on the Power Saving switcher.

Compiler and LSP server

Typstify uses the Typst compiler to export files, and uses the Tinymist LSP server to provide advanced editor features such as auto-completion, hover tips, diagnostics info, etc. These compiler and LSP server are bundled into the final installer packages, and used by default. In some cases users might want to use another version of Typst or Tinymist, this can be done via setting the External Typst Compiler Dir and External LSP Server(Tinymist) Dir.

⚠️ Please be noted that users must make sure the external tools versions are compatible with the built-in ones. Otherwise Typstify may not work as expected or crash.


Platforms Support

Typstify is available on macOS, Windows, and Linux. Please note that Input Method Editor (IME) support is currently unavailable in the Linux version. Users requiring CJK input or other complex encoding systems may experience limitations at this time.


Appendix

Keyboard shortcuts

Action Shortcut
File management
Copy file or folder Ctrl+C, ⌘+C
Paste file or folder Ctrl+V, ⌘+V
Cut file or folder Ctrl+X, ⌘+X
Basic Editing
Copy selected text Ctrl+C
Cut selected text Ctrl+X
Copy current line (empty selection) Ctrl+C
Cut current line (empty selection) Ctrl+X
Paste text Ctrl+V
Select all text Ctrl+A
Undo Ctrl+Z
Redo Ctrl+Shift+Z
Go to start of line Ctrl+Home
Go to end of line Ctrl+End
Go to start of file Ctrl+Home
Go to end of file Ctrl+End
Delete backward
Delete forward
Delete word backward Alt+⌫
Delete word forward Alt+⌦
Move line up
Move line down
Move character backward
Move character forward
Move word backward Alt+←
Move word forward Alt+→
Scroll page up/down PgUp, PgDn
Dedent line(s) Shift+Tab
Indent lines Tab
Search & replace Ctrl+F
Toggle wrapping mode Ctrl+W
Toggle locked mode Ctrl+L

Built-in fonts

Some fonts are embedded into the Typstify app. When setting fonts for UI or the editor, it can be handy to use them:

  1. Go from the Go fonts family
  2. Go Medium from the Go fonts family
  3. Go Mono from the Go fonts family
  4. Go Smallcaps from the Go fonts family
  5. Hack from Github
  6. Noto Sans Math from Google Fonts, to display math symbols.
  7. Noto Emoji from Google Fonts, for system emoji replacement.
  8. Roboto Mono from Google Fonts

© Copyright Notice

The fonts used in this application are open-source software. All title, ownership rights, and intellectual property rights in and to the fonts remain the property of their respective copyright holders. These fonts are provided “as is” without warranty of any kind, express or implied, under their respective open-source licenses.