Sublime Itch

Sublime Itch is a small desktop app for writing itch.io devlogs in Markdown written on rust and typescript using the tauri framework. You write Markdown on one panel and see a preview on the other, roughly as itch will show it. When your devlog is finished, with just one button you can copy the produced HTML to paste directly into the itch editor or use the upload to itch function to automatically send the text to an existing post or create a new one.

It exists because itch’s own editor is fine for short entries but for long devlogs it can become a headache: formatting drifts, pasted images land in odd places, and there’s no way to keep a draft anywhere but on itch. Here, every devlog is a plain text file on your computer, kept in a library next to the other devlogs of the same game or tool.

It runs on Linux and Windows, maybe MacOS if enough people ask for it. The download is on its itch.io page, and problems or ideas go to the issue tracker.

These pages cover using it. If you’ve never opened it, start with Getting started.

Getting started

Installing

On Windows, the download is the program itself, with no installer. It needs the WebView2 runtime, which Windows 10 and 11 already have.

On Linux, there’s a package for the big families of distributions, about 5 MB each, which use the web engine your system already has:

Any of them puts Sublime Itch in the applications menu, and installing a newer one the same way updates it. The demo’s packages work the same, and installing the full version over the demo replaces it, keeping your library as it is.

On any other Linux, or if you’d rather not install anything, there’s the AppImage, about 80 MB because it carries its own web engine. Make it executable (in a file manager, under the file’s properties, or with chmod +x in a terminal) and run it. The first time, it offers to add itself to the applications menu. A copy installed by the itch app stays where it is, so the itch app will keep it up to date.

Your first devlog

The left most panel of the app is the library. A new project starts from the folder button at its top (or Ctrl+N when nothing is open): give it the game or tool’s name, and choose whether it starts with a devlog or with the game’s page. A game page is the local file equivalent to the game or tool front page on itch. Only one game page file can exist per project.

The preview on the right follows as you type. The toolbar above the editor has buttons for common formatting options, and Writing a devlog lists everything the editor understands.

Signing in to itch

Sign in to itch.io, the button at the top right, opens itch’s own login page in a window of its own. Signing in is needed to upload and fetch images, devlogs and gampages to and from itch.

Posting it Manually

When the devlog is ready, press the red copy button at the right end of the preview’s bar. A number beside it means it has images itch doesn’t have yet: it will uploads those first. Then, on itch:

1. Open the devlog post (a new one, or the draft you’re updating).
2. Switch its editor to the HTML view, with the <> button.
3. Replace what’s there with what you copied.
4. Important: Type a character in the normal view and delete it again, then save.

Don’t skip that last step: without it, itch can drop what you pasted, and the post goes back to what it was when you save and reload.

Where your devlogs are kept

Every devlog is a Markdown file, in a folder per project:

• Windows: %APPDATA%\cl.gcat.sublime-itch\library
• Linux: ~/.local/share/cl.gcat.sublime-itch/library

They’re ordinary files you can back up, sync or open in another editor. Right-click a devlog and choose Show in file manager to jump to it.

Writing a devlog

Devlogs are written in Markdown, the plain-text formatting most forums and chat apps use: **bold**, *italic*, # A heading. Every button on the toolbar writes Markdown for you, so it’s never necessary to remember the marks, but they’re all listed here, along with a few additions for things itch can do that Markdown can’t.

The toolbar

From left to right: the line’s level (a paragraph, or a heading from 1 to 6), bold, italic, underline, strikethrough, spoiler, colours, link, bulleted list, numbered list, quote, centre, right, code, collapsible section, table, image, YouTube video, and find. Hovering over a button shows what it does and its keyboard shortcut.

Buttons act on the selection. With nothing selected, they insert a placeholder to type over.

What the editor understands

Spoilers are written as Discord writes them. Inside a table, their bars need a backslash each, \|\|like this\|\|, because a table already uses | between its columns.

Lists

The list buttons work on every line the selection touches. Pressing the numbered-list button on a bulleted list turns it into a numbered one (and the other way round), renumbering it and keeping nested items in their place. Pressing a list’s own button again turns it back into plain lines. With the cursor in a list and nothing selected, the whole list changes.

Code blocks

The code button wraps a word in backticks. With several lines selected, it makes a block instead:

```
let speed = 12
```

Collapsible sections

Itch can fold a section away behind a title, which suits long changelogs. Here that’s a block that starts with :::collapse and its title, and ends with ::::

:::collapse Full changelog
- Drifting, with sparks
- A new canyon level
:::

The preview opens them so you can see what’s inside, on itch they start closed.

Centred and right-aligned text

The same kind of block, named center or right, aligns everything in it, images included:

:::center
![The canyon at dusk](media/canyon.png)

*The new canyon level*
:::

The centre and right buttons put the selected lines in such a block. Pressing the other one switches the side, pressing the same one again takes the alignment off.

Blocks can go inside each other, a centred line inside a collapsible section for example. A ::: on its own always closes the block opened most recently.

Colours, boxes and frames

Itch’s own editor has no colours, but a post can still have them. The palette button opens a small menu: a colour for the selected words, their size, or a box or a frame around the selected lines.

Coloured words are the words in square brackets, with the colour in braces right after:

The boss now has [three phases]{red}, and [one is secret]{green 150%}.

The colours are red, orange, yellow, green, blue, purple and grey, picked to read on dark itch pages and light ones alike. Any colour of your own works too, as its code, {#8fd14f}. The size is a percentage of the text around it, from 50% to 400%: the menu’s Size list offers the usual steps, and you can type any other, {140%}. A colour and a size go together, {red 150%}, and {big} and {small} still work, as 135% and 85%. Inside the brackets, everything else still works: bold, links, spoilers.

A box is a block like the collapsible ones, with its colour after its name:

:::box yellow
**Known issue:** saving on Windows 7 is slow.
:::

It comes out pale, with dark words of its own, so it reads the same whatever your page’s colours are. :::frame red draws a coloured border instead. Anything goes inside either: lists, images and other blocks. Their corners are square, because itch doesn’t keep rounded ones.

Each row of the menu starts with a struck-out A, which takes that one thing away: the colour of the words the cursor is in (their size stays), or the box or frame around it (what’s inside stays). Setting Size back to Normal takes the size away the same way, and the list always shows the size of the words the cursor is in. Picking a colour for words that already have one changes it, and so does picking a box or frame colour while inside one, rather than adding another around it.

Tables

| Rover | Top speed | Drifts |
| --- | :---: | ---: |
| Scout | 80 | yes |

The colons in the second line align a column: :---: centres it, ---: puts it on the right. itch shows the alignment as you’d expect.

YouTube videos

A video goes on a line of its own, with any YouTube link, or just the video’s id:

@[youtube](https://youtu.be/1ThgYIYSe6k)

On itch it becomes the usual embedded player. The preview shows a link to the video instead of loading YouTube.

Spelling

Spelling is checked as you type, in US English, and only in the prose: addresses, image paths and code are left alone. Right-click an underlined word for suggestions.

Finding things

Ctrl+F, or the magnifier at the end of the toolbar, opens find and replace, with options for matching case, whole words and regular expressions. The footer counts the words of the devlog as readers will see them, without image paths, link addresses or Markdown’s marks.

The preview

The preview shows a dark page, or itch’s own light one; the sun or moon at its top right switches between them. The arrows next to it swap the preview and the editor from side to side.

The editor and the preview scroll together: scroll either one and the other follows to the same place, tall images and long paragraphs included, and while you type the preview keeps up with you. The button with two arrows, at the left of the preview’s bar, lets each one scroll on its own instead; it remembers your choice.

Images

Adding them

There are three ways to get an image into a devlog: paste it, drag it in from a file manager or a browser, or use the image button on the toolbar. Each one is copied into the project’s own media folder and gets a line of its own in the devlog, where it was dropped:

![The canyon at dusk](media/3fa2c1.png)

The text in the brackets is the image’s description, read aloud by screen readers. It’s worth filling in.

PNG, JPEG and GIF are supported, as on itch. The preview shows them straight from the project’s folder.

Cropping and resizing

Double-click an image in the preview, or right-click it and choose Crop and resize…, to cut it down to the part that matters or change its size, without another program.

Drag across the picture to draw a frame around the part to keep. Drag the frame to move it, or its corners and sides to change it, and Whole picture starts over. The width the picture is saved at goes in Width, and the height follows to keep its shape. For pixel art, tick Sharp pixels: it’s resized pixel by pixel, so the edges stay crisp instead of blurring. An animated GIF keeps every frame.

Save as a new picture puts the new one where the old one was in the devlog, as a single edit that Ctrl+Z undoes. The original file stays in the project, so other devlogs that show it aren’t changed.

GIFs from video

Most devlogs live on GIFs of the game, and a recording is rarely the part you want. The film strip button on the toolbar, GIF from a video, opens a video file of any common kind (MP4, WebM, MOV, MKV and more). Dropping one from your file manager onto the editor opens it too.

• The timeline under the picture is a filmstrip of the whole video, with the clip marked on it between two red handles. Drag them to where the clip starts and ends, up to a minute of it.
• Press or drag anywhere else on the timeline to see that moment: the white line shows where you are. The arrow keys move it, or the handle you last touched, by one frame, and by a second with Shift. Start here and End here put the clip’s start or end at the moment shown.
• Play the clip plays it over and over as the GIF will play, at its speed and frames a second, so you can see where it loops before making it.
• Drag across the picture to keep only part of it, as when cropping a picture.
• Width, Frames a second and Speed set the GIF’s size and smoothness. Fewer frames and a smaller width make a lighter GIF, and Sharp pixels keeps pixel art crisp. Under them, the dialog says how big the GIF will be: it makes it in the background with those settings, so the size is exact (a long clip gets a quick guess first). Over the 3 MB itch takes, it turns red and says what itch would get if you uploaded it anyway: a copy the app scales down until it fits, and how small that is. Choosing a narrower width or fewer frames a second here usually looks better than that. Once the size is shown, Make the GIF is instant, as it’s made already.

Make the GIF puts it into the devlog where the cursor is, made with a palette of the clip’s own colours so it looks its best. The video itself isn’t changed. itch takes GIFs up to 3 MB: when one comes out bigger, the app says so, and uploading it offers a smaller copy, or make it shorter, narrower or with fewer frames.

GIFs from video need ffmpeg, a free program that reads videos. The Linux packages install it, or ask for it, along with Sublime Itch. On Windows, the first time, the app offers to download it, about 110 MB from gyan.dev, where ffmpeg’s own site sends Windows users, checked before it’s used. On Fedora, Fedora’s own ffmpeg can’t read every kind of video: if one won’t open, RPM Fusion’s ffmpeg reads more.

The free version makes one GIF from video for each devlog, and renaming the devlog doesn’t give it another; the full version makes as many as you like.

Marking up

To point at something in a screenshot, right-click the image in the preview and choose Mark up….

Choose Arrow, Box, Circle or Pen, a colour and a width, then drag on the picture: an arrow goes from where you press to where you let go, a box or a circle fills the space you drag over, and the pen draws wherever you drag, a click making a dot. With Text, click where the words go and type: Enter puts them on the picture, Shift+Enter starts a new line and Esc takes them away. Words are bold, in the colour chosen, and the width buttons become Small, Medium and Large. Outline gives them an edge, dark or light, that keeps them readable on a busy picture.

Press any mark, on its line or anywhere on words, to choose it: it’s framed, and the buttons show how it looks. Drag it to move it, pick a colour, width or size to change it, or press Delete to take it away. A click on words opens them to change what they say. The mark you’ve just drawn is chosen too, so a colour picked right after changes it. Undo (or Ctrl+Z) takes back the last change, whatever it was, and Clear takes every mark away (Undo brings them back). The marks are drawn at the picture’s own size, smooth, and an animated GIF gets them on every frame.

Save as a new picture works as cropping does: the marked picture takes the old one’s place in the devlog, Ctrl+Z puts it back, and the original file stays in the project.

Combining pictures into one

A row of pictures (see below) can become a single picture, which is handy for a before and after. Right-click one of them and choose Combine into one picture…, then Side by side or One above the other. The pictures are scaled to the same height (or width), a small gap between them, and the row in the devlog becomes that one picture, with a description naming them all. Captions don’t come along, since one picture has one caption. Ctrl+Z puts the row back, and the originals stay in the project.

An animated GIF can’t be combined with others, as its frames would be lost.

On the page: captions, sizes and side by side

Right-click an image in the preview for how it sits on the page. Each of these changes the devlog’s text, which you can also write yourself:

Caption… puts a line in small italics under the picture, the way itch shows captions. In the text it’s the picture’s title, in quotes after its file:

![The ridge](media/ridge.png "The ridge, with its new moon")

A picture in the middle of a sentence keeps its title as a tooltip instead, since a caption needs room under it.

Shown at sets how wide the picture shows on the page: Full, or 75%, 50% or 33% of the column. In the text it goes in braces right after the picture, as a percentage or in pixels, {50%} or {320px}. It only changes how it’s shown; to make the file itself smaller, crop and resize it.

Side by side puts the pictures next to it in one row, and Not side by side takes them out again. A row is a block like the collapsible ones, with each picture on a line of its own:

:::row
![The canyon](media/canyon.png)
![The ridge](media/ridge.png "The ridge, with its new moon")
![The flats](media/flats.png)
:::

The pictures share the row’s width evenly, and one with a width of its own keeps it while the others share what’s left. A caption goes under its own picture.

Uploading

Images reach itch when the devlog’s HTML is copied, or saved to itch. The red copy button at the end of the preview’s bar shows how many images it’ll upload first, a number beside its icon, and hovering it says what it’s about to do: Copy HTML when every image is on itch already, Upload 3 images & copy HTML when some aren’t. Only the new ones are uploaded: an image already on itch is never sent again, even when it’s used in several devlogs of the same project.

Uploading needs you signed in to itch. If itch is busy, uploading waits a moment and carries on by itself.

Images that are too big

Itch limits how big an image can be, and big GIFs in particular can go over. When that happens, everything that can be uploaded is uploaded, and a dialog lists the images that are too big, with an offer to send a smaller copy of each.

A smaller copy is scaled down just enough to fit. PNGs stay PNGs and JPEGs stay JPEGs. An animated GIF keeps every frame and its timing. One thing to know: a shrunk GIF always loops forever.

Your local files are never touched. The smaller copy goes to itch only, and the preview keeps showing the original.

Saving to itch

Instead of copying the HTML and pasting it into itch’s editor, Sublime Itch can write a devlog straight into its post on itch. The full version does this as often as you like, the free version does it for up to five posts (more on that below).

Save to itch

It’s the red button with an arrow pointing up, at the right end of the preview’s bar, next to the copy button. Pressing it, first uploads any images itch doesn’t have yet, the same as copying does, and then replaces the itch post’s text with the devlog’s. Only the text changes: the post’s title, its cover image, its comments and everything else on it stay as they were. Itch’s editor sometimes tidies the formatting a little as it takes the text in, you’ll see a message on the footer bar of the app when that happens.

The first time you save a devlog, it asks where it goes: into a post that’s already on itch, picked from the game’s posts (drafts included), or into a new draft made for it. It also needs to know which of your games or tools the project belongs to. A game/tool with the project’s name is picked for you, otherwise you choose it from your games/tools. Both are remembered, so every save after that goes straight to the same post.

You need to be signed in to itch for any of this.

Before it replaces anything

A save replaces what’s on itch, so it stops and asks if you really want to do it.

If the post was edited on itch since you last saved it from here, or it has text that was never written here, nothing is sent. You choose what wins: bring itch’s version in (it takes the devlog’s place here, yours kept in the history and one Ctrl+Z away), or replace itch’s with yours.

Whatever itch had before a save is kept in the devlog’s history too, as “On itch, before a save replaced it”. A save made by mistake can be undone: restore that copy, then save again.

New drafts

Right-click a devlog and choose Make a draft on itch… to start its post from here. It asks for the post type, from the ones itch offers, and makes an unpublished draft titled with the devlog’s name and holding its text. The draft is linked to the devlog, so Save to itch updates it from then on, making it public is still done on itch, when you’re ready.

The devlog needs some text first: itch won’t take an empty post.

Game pages

A game page is never saved to itch from here cause it’s risky. Its page on itch also holds its price, who can see it and its downloads, and a save from outside itch’s own editor could change those on the live store page: a paid game could turn free, or the page could disappear. Pressing Save to itch on a game page offers Copy HTML instead, to manually paste into its description on itch.

To bring the page’s text in from itch, right-click it and choose Bring in from itch… (see Importing from itch).

Where each devlog stands

A small dot at the end of each devlog’s row in the library says where it is on itch:

• green, live on itch
• amber, a draft on itch
• grey, linked to a post whose state isn’t known yet
• an empty ring, only here

The dots are brought up to date whenever the app starts signed in, or you sign in, so a draft you published on itch’s site turns green on its own.

The free version’s five posts

The free version saves to up to five itch posts across all your projects. The first save to a post counts it, and so does making a new draft. Saving again to a post that’s already counted always works, as often as you like.

When a save would make a sixth, it says so before anything is sent and offers two ways on: the full version, which saves to any number of posts, or Copy HTML for that one devlog. Copying is never limited.

What counts is the posts you’ve saved to, not the devlogs here, so deleting or unlinking a devlog doesn’t give one back. About shows how many you’ve used.

The full version is on Sublime Itch’s itch.io page. Moving to it keeps your library, your sign-in and everything else as they are.

Importing from itch

A devlog started on itch, or one already published, can be brought into the library and finished here. So can a game’s page. Import from itch, the arrow at the top of the library, opens the dialog.

From your games

Signed in, the dialog opens on From your games. Pick the game, then its page or one of its posts, drafts are listed too. Each one says whether it’s here already:

• One that’s here already (a post linked to one of your devlogs, or a game page the project has) is brought by replacing its local file, once you’ve said yes. What the file had is kept in its history, and Ctrl+Z gives it back.
• One that’s not here yet becomes a new file, in the project that goes with the game. Check the project and devlog names it fills in, then press Import. A post brought in this way is linked to its devlog, so the next import of it knows where it goes.

By its address

By address or HTML takes the post’s address instead: paste it and press Fetch. Any of these work:

• the post’s edit page, https://itch.io/dashboard/post/1234567/edit
• the public devlog, https://you.itch.io/your-game/devlog/1234567/a-title
• just the post’s number, 1234567
• for a game’s page, its edit page, https://itch.io/game/edit/1234567

Drafts can be fetched too, since you’re signed in. Check the project and devlog names it fills in, then press Import.

Pasting the HTML instead

Without signing in, the dialog also takes HTML pasted into its big box: open the post on itch, switch its editor to the HTML view (the <> button), and copy everything there.

Bringing one up to date

A game page, or a devlog linked to its post, that was edited on itch since can be brought in again. Right-click it and choose Bring in from itch…: the dialog opens with its game and its page or post already picked, and Import brings itch’s version in over it, once you’ve said yes.

What comes along

The images are downloaded into the project’s media folder, so the devlog works offline, and copying the devlog later won’t upload them again.

Headings, bold, italic, underline, strikethrough, spoilers, links, lists, quotes, code, tables, centred and right-aligned text, horizontal rules, collapsible sections and YouTube videos all come back as the Markdown described in Writing a devlog.

A few things have no Markdown here and are left out: videos from sites other than YouTube, and text colours and fonts. The import says what it left out, so nothing goes missing without a word.

The library

The left side of the window lists every project and its devlogs, as folders and files. A project’s game page, when it has one, sits first with a gamepad icon, then its template, then the devlogs. A dot at the end of each devlog’s row says whether it’s live on itch, a draft there, or only here (Saving to itch).

Making things

The folder button at the top makes a new project. The + that appears when hovering a project (or Ctrl+N) adds a row for a new devlog: type its name and press Enter, or press Esc to change your mind. A project’s game page starts from its right-click menu, with New game page.

Keeping it tidy

Double-click a name, or press F2, to rename it. Drag devlogs and projects to put them in the order you want, until you do, names sort as people count, so 0.2 comes before 0.10. The arrow beside a project folds it shut.

As a library grows, the filter box at the top narrows it down as you type. A devlog stays in view when every word typed is in its name or its project’s, so canyon 0.4 finds it, and case and accents don’t matter. Esc clears it.

The right-click menu

On a devlog, the menu also offers:

• Show in file manager, which opens its folder with the file selected
• Copy path, the file’s full path
• History…, its earlier versions
• Make a draft on itch…, a new post on itch for it (Saving to itch)
• Bring in from itch…, on a game page or a devlog linked to its post: its text as it is on itch now (Importing from itch)
• Move to trash…, which uses your system’s trash, after asking, so a mistake can still be undone there

History

While you write, a copy of each devlog is kept every few minutes, and another just before anything replaces it whole. History… lists them; choosing one puts it back, as a single edit that Ctrl+Z undoes. Every copy from the last day stays. After that only one a day is kept for a month, then one a week, so an in-between version from long ago won’t be there. The copies taken before something replaced the devlog are always kept.

Saving

There’s no save button. Devlogs are saved a moment after you stop typing, when you open another one, and before the window closes. The top bar says whether the open devlog is saved. Going back to a devlog opened earlier finds it where you left it, same line, same scroll.

Moving the library

Library folder button, at the bottom of the library panel, shows where your projects are kept and lets you put them somewhere else. Choose an empty folder and the whole library moves there, images and history included. Sublime Itch keeps it there from then on, and Back to the default button brings it home again.

That’s also how to have your devlogs on more than one computer. Put the library in a folder Dropbox or google drive keeps in sync, or in a git repository, then on the other computer choose that same folder: Sublime Itch sees there’s a library in it already and uses it as it is, leaving the one it had where it was. A folder with other things in it is turned down, so your projects never get mixed in with unrelated files.

If a devlog changes on disk while Sublime Itch is open, because a sync brought in another computer’s version or another editor saved it, the app notices when you come back to its window. The new version takes the devlog’s place and yours goes into its history, one Ctrl+Z away. If you had edits that weren’t saved yet, yours are kept and saved, and the other version goes into the history instead. Nothing is thrown away either way, but two computers writing the same devlog at the same moment is still best avoided.

If the library’s folder is on a drive that’s unplugged, or in a synced folder that isn’t there, Sublime Itch says so instead of starting an empty library. Connect it and open the app again, or choose another folder.

Templates

A template is what a project’s new devlogs start from: the sections written every time, a heading, a sign-off. Each project can have one.

Making one

Right-click a project and choose New template. It appears as Template, pinned near the top of the project, and opens, write it like any devlog. To stop using it, right-click it and move it to the trash. Devlogs already made from it keep their text.

Naming new devlogs

A template can begin with a name pattern, between two --- lines, with {n} where each number goes:

---
name: Week {n}
---

With a pattern, the + beside the project (or Ctrl+N) fills in the next name, already selected: Enter takes it, typing replaces it. The next number follows the highest one so far, wherever it sits in the library, and never repeats a name you already have.

Leading zeros are kept (Week 07, then Week 08) until the number needs another digit (Week 09, then Week 10). Devlogs whose names don’t fit the pattern are left out of the count.

Several numbers

A pattern can have as many numbers as your names do, which suits version numbers:

---
name: Update v{n}.{n}.{n}
---

Then there’s a next name for each number. The + fills in the one with the last number counted on, and lists the others under it: click one, or press Up and Down to go through them. When a number goes up, the ones after it start over: at 0, or at 1 if your names never use a 0, as episodes don’t. So versions go from v1.1.0 to v1.2.0 and seasons start again at Episode 1, without telling it which.

Numbers compare one at a time, so v1.10.0 comes after v1.9.3, and the newest is the one the next names count on from.

A new template guesses its pattern from the project’s last devlog, every number of a version included: after “Update v1.1.0” it’s Update v{n}.{n}.{n}. Change it as you like, or delete the --- lines, and the pattern with them, to type every name yourself.

What gets filled in

When a devlog is made from the template, these are replaced in its text:

With a pattern, {previous} is the devlog with the highest number; without one, it’s the last in the library. Anything else in braces is left as it is, and the pattern lines never reach the devlog.

An example

---
name: Week {n}
---
# {project}: {name}

*{date}*

## What's new since {previous}

- 

## Next week

- 

The template’s own preview shows it as its devlogs will start, without the pattern, braces and all.

Good to know

Changing the template only affects devlogs made afterwards. The template isn’t a devlog itself: it can’t be copied to itch, renamed or dragged. A devlog imported from itch brings its own text, so the template isn’t used for it. And it’s a file like the others, _template.md in the project’s folder.

Keyboard shortcuts

On a Mac these would use Cmd, but there’s no Mac version yet.

Formatting

On Windows with a keyboard layout where AltGr types characters (Spanish, for one), Ctrl+Alt with a number may type the character instead of changing the heading. The heading menu on the toolbar always works.

Editing

The library