Changelog

🎉 snappify Slides

Since April we're working heavily on extending snappify with Presentation & Animation capabilities.

We just published an in-depth blog post talking about our vision, what's already possible and what's coming next.

🔗 Richtext extensions

Exciting news! Our rich-text editor has just been upgraded to include support for links! 🎉

This enhancement is particularly useful when working on slides, as you now have the ability to add external links. Whether it's a link to a valuable resource, your website, or your social media profiles, you can effortlessly incorporate them into your content.

Furthermore, we've also introduced the ability to format text in italic and underline styles. These additional styling options offer even more flexibility to customize your text and make it stand out.

📏 Guidelines while resizing

You'll now see Snapping Guidelines while resizing elements on the canvas. This helps you to align elements to each other. You can deactivate them by pressing while resizing.

We now also show a small Size indicator on the top left of the element.

📷 OpenGraph Images for your Snaps

When you share your snaps on Social Media or other platforms via its public URL, we show a preview image of your snap as the open graph image.

After initially publishing your snaps the OG image will first be generated. You can regenerate it manually at any given time. In the future we'd like to support uploading custom OG images as well.

💅 Copy and Paste element style

From now on you can copy and paste the style of a code-editor and rich-text element. This is especially useful if you want to quickly apply the same style across multiple elements.

Just open the context-menu with right-click on those elements and select "Copy Style" or "Paste Style".

🎬 Video element

snappify has a new Video element which fits perfectly if you e.g. want to show the result or a product preview during a presentation! 🥳

In first place you can only paste a direct URL to the video from your cloud storage provider. In a later phase we will add the possibility to upload videos directly to snappify.

🌠 Background image

Until now it was only possible to specify either a solid or a gradient color for the background of your snap.

From now on it's also possible to specify an image 🥳

You can choose from a variety of background images we prepared for you in our library, or upload a custom image.

📸 Background presets

We've introduced some Presets to easily change the size of your snap to the desired format of well-known social media platforms. We also added three presets for creating Slides in your presentation.

When you choose a preset, the background will enable to keep the aspect ratio, so you can resize it and still keep the desired format. You can toggle off the aspect ratio flag at any time.

🌅 Background: Fixed / Auto Size

Additionally we refactored our previous "Spotlight element" logic to a simpler option called Background Auto Size.

Learn more about it in our Documentation.

💬 Inline toolbar & List-items

It's time for another update for our rich-text editor! 🥳

We've added a new inline toolbar that that appears when you’re editing text. It allows you to quickly format your text alignment, font size, font family, line height, letter spacing and text color.

New! You can now also add bullet and numbered list items. This is a must have for presentations- our brand new feature which is currently in Closed Beta

✨ AI Explanations

It's now possible to create Code Explanations with our AI powered solution!

Just right-click on a selected code and let the AI generate an explanation for you. You can then edit the explanation to your liking.

👩‍💻👨‍💻 Teams plan

Now you can collaborate with your team members on a shared workspace. Each team member can create and edit snaps and folders.

The admin of the team can invite new members and manage them.

Currently our team plan includes up to 4 members. In the future, we will add the possibilities to add more members as the demand increases.

🖼️ Code Editor Border

It's now possible to specify a border for code editor elements. This enables even more styles variations for your code snippets. 😄

You can find the setting in the right toolbar.

🤝 Position Constraint Scale

We've introduced a new Position Constraint called "Scale." When applied, this constraint allows elements to maintain their size relative to the background, which is particularly useful when placing background images and ensuring they cover the entire canvas.

Learn more about the different Position Constraints on our new docs page.

💡 Explain code snippets

It's now even easier to create code explanations with snappify!

Just right click on the selected code in a code-editor element and click the "Explain" option. Checkout the docs for more informations.

🏠 Sort Folders and Snaps

You're now able to sort Folders and Snaps on the Dashboard by their name, creation date or last modified date.

↦ Tab Size

The tab size (indentation) of the code editor can now be adjusted from 2 to up to 6 spaces.

👉 Arrow Improvements

You’re now able to attach arrows to elements! 🥳

That means you don’t have to reposition an arrow when you move around the element to which it is pointing at. It will automatically adjust its position.

Learn more about it in our new Arrow documentation.

New way of drawing arrows and form elements

Additionally, we’ve refined the way of adding new arrows or form elements to your snap.

When clicking on the form element button on the top of the editor and choosing the desired element, you can now immediately start drawing on the canvas. This makes it easier to place the element right where you want it.

🎨 Color Picker Improvements

From now on, you will see all the colors you have used in the current snap at the top of each color picker. This gives you easy access to all relevant colors.

In addition, we have separated the recently used colors from the preset color palette to make both easier accessible. You can also pin the recently used colors to create your own preferred color palette

🎛 New Advanced Style Properties

We’ve introduced some new advanced style properties! 🥳 You’re now able to specify Blur, Grayscale, Sepia and Hue Rotation on every element!

Hint: this is also able on Group elements, so it’s easy to apply those effects on multiple elements at once.

🖼️ Static Images

We've improved our image component! Now, you can easily add handpicked dev-icons, emojis, and other icons. Plus, you can easily replace an image while keeping the configured settings on the right toolbar. In the element tree, you'll also see a small preview image for easier orientation.

For more information visit the docs.

Today we migrated our Domain from snappify.io to snappify.com 🥳

We’re really proud of this step as it makes our brand more serious.

All possible redirects are in place, so everything should still work as expected. Nevertheless, if you still expect any issues, please don’t hesitate to reach out!

🏘 Element Grouping

From now on it’s possible to group elements in the tree! 🥳

Grouped elements act like a single element on the canvas. You can move them around and they'll stick together, which can be pretty handy when you want to group several design elements together.

Read more about grouping an other changes regarding the Element Tree on our docs.

💬 Rich Text Improvements

Our rich-text element just got even better! Let’s see what has been changed.

Padding: Now it is possible to adjust padding. This plays very nicely if your text element has a background.

Resize: Sometimes you want to resize a text element for your need. We got your back by providing 3 different resize modes 🙌

Vertical alignment: Since the size of the text element can be adjusted freely you can change vertical alignment.

Read more about the Text element on our docs.

🌐 Share & Embed

Today we released a unified experience for Embedding & Sharing your snaps from a new modal. You're now also able to describe your snap for better SEO.

Hint: Your old snaps are now public by default and accessible by everyone who has the URL. Newly created snaps will be unpublished by default and you have to actively publish them.

Additionally we also unlock this powerful feature for our free plan, so more people can get in touch with it. 🙌

When creating a new snap with snappify, you maybe need different starting points. Like either you want to start with a Blank canvas, or only a code editor.

That’s why we’ve introduced a new Modal for creating snaps, where you can choose the default snap to start with! It also includes a link to our new Template Gallery, if you want to get started with a more sophisticated Templates.

We’d love to hear your feedback about this. Do you maybe have default styles you’d like to be added to this modal or other additions you’d like to see?

🎃 Happy Halloween!

Celebrate and spook away all those bugs using our scary new Halloween templates 👻🧛‍♂️🧟

Head over to the template 👈

🏛 Templates

The snappify Template Gallery is live! Choose from various handcrafted Design Templates to quickly get started with your next snap. 🙌

We strive to manually extend the gallery and even have plans for opening it up to Community contributions in the future!

Head over to our templates 👈

🔓🟠🟪🔷 Form Elements Tutorial

Our users on the free plan now have unlimited access to form elements. 🙌

On top of that, we also introduced our first tutorial where we explore how we can leverage those form elements. At the end of the tutorial, we have 3 templates (see the image) that you can copy to your dashboard and customize how you like. 😎

Check out the tutorial 👈

🔍 IntelliJ Plugin

The official IntelliJ Plugin for snappify is now available 🥳 You’re now able to create your snaps directly from your IntelliJ-based IDE.

Check out:

• The plugin on the Jetbrains Marketplace
• Our docs for the plugin

🦸 More free-tier options

From now on users on the free-tier are able to create up to 3 snaps (+ one per Integration) on the snappify Dashboard 🥳

We want to give our users more power so they see what they can achieve with snappify 💪🔥

More Shortcuts

Additionally we also enabled more shortcuts for free users. They come in really handy when using the snappify Editor so be sure to check them out!

🔆 Opacity code highlighting

In the future, we want to unlock more features for our free plan. Today we did the first step and removed the restrictions of code highlighting 🥳.

Additionally, we are happy to introduce the opacity highlighting. Have fun!

⌨️ Disable snapping guidelines

Snapping guidelines is a must for a graphic design tool. But Sometimes you want to position elements freely per drag. Now you can do that! Just hold to disable the snapping guideline.

As part of these changes, we also changed how you can multi-select elements on canvas individually. You can either select multiple elements with Shift-Click or per drag-select.

Elements list improvements

We polished the UI of the elements list (left toolbar) and also improved the UX for better distinction of the hover and selected state to the elements.

In addition to existing elements selection by pressing and click, we also support selecting multiple elements with Shift-Click.

The context menu got new a new option to “Rename” which is the same as double-click on the element. Also, lock/hide options are added, which can be applied on multi-selection.

✍️ Rename elements

Give the element a custom name to keep a better overview. Simply double-click on the label of the element to enter the edit mode. The new name will be saved automatically if you click outside or by hitting ENTER.

🔍 Embedding Support

From now on you’re able to embed your snaps on Hashnode, Medium, or Notion.

Have you ever wanted to embed beautiful code snippets or even more sophisticated code explanations in your technical blog? snappify got you covered 💪

Those embedded snaps are responsive and fully interactive, which means that your viewers can easily copy your code snippets.

Checkout the docs for more information and to see some examples.

🚀 Responsive Embeds

We now support responsive embedded snaps! 🥳

They will shrink in size or be centered depending on the screen size. Now there’s nothing which stops you to embed beautiful code explanations on your own website / blog! 🙌

Checkout the docs for more information.

The snappify Docs are live! 🥳

It will be a living documentation and is still not finished, but we’re happy that we have released the first version. If you miss anything specific, please reach out to us via chat.

What’s maybe interesting for you, because it was basically hidden until now, is that we now have docs for our Simple Snap API which lets you automate the creation of your snaps!

🖱 Multi-select per drag

Now you can select elements on the canvas with a simple drag same as you used to with other editing tools.

🌈 Gradient Picker

A new gradient picker has landed on snappify! 🥳

This means that you now can specify gradient colors on every element color, doesn’t matter if it’s the text color, code editor color, stroke colors, snap background - no limitations! 😄

Hint: easily paste CSS gradient values in the gradient picker to apply them!

🔒 👁 Lock & Hide elements

Lock and Hide elements for a better editing experience on the canvas.

Lock: When an element is locked it becomes not selectable on the canvas so you can’t move it unintentionally.

Hide: When an element is hidden it disappears completely from the canvas. This also means snapping guidelines won’t be applied to this element.

However, in both case, you’ll be able to select the element still on the elements list (left toolbar) and change the properties of the element as usual

🙌 Form Elements

Various new form elements are now supported! 🥳

Now you can add ellipse (circle), rectangle, and different types of polygon elements to your snaps.

As you can see in the screenshot above, you can also use it for more sophisticated code annotations.

🚀 Ellipse Elements

The first form element - the ellipse - hast just landed in snappify 🤩

Form elements help you to style your snaps in an even more unique way and we want to add more variants in the upcoming weeks!

Hint: press Shift while resizing an ellipse element to create circles.

Auto generated folders

We introduced “automatically generated folders”.

Every time a snap gets generated via the API or the VS Code Extension, it will be stored in the corresponding folder, so those snaps don’t pollute your Root folder anymore. 😄

Of course you can just move the snaps into any other folder afterwards!

🕹️ Tilting

Now you can tilt the code-editor, rich-text, profile-info and custom image elements. So you can present your snap in an even cooler way 😎. Just play with the control (2) - you will love it.

In case you already know the exact tilting degree, you can activate the manual editing mode where you can put the values into the input fields.

🎛 Rotate Handle

The snappify Editor now shows you a rotate handle for all elements which can be rotated.

Hint: If you have pressed while rotating, the element will move in 45° steps.

🤖 VS Code Extension

The snappify VS Code extension is now publicly available! 🥳

Now you can just create snaps from within your IDE - head over to the VS Code Marketplace for usage instructions.

👉 New Arrow Styles

New Arrow Styles have landed! 🥳

You’re now able to create dashed or dotted lines and have the ability to customize the start and end markers of each arrow. It’s also possible to choose now marker at all to just draw a simple line.

Have a look on the right toolbar when selecting an Arrow element to see which customizations are possible.

🌱 New Window Styles

We released some new code window styles to give you more options on how to style your code snippets! 🥳

In order to change the style you have to select a code window and open the “Window Control” accordion on the right toolbar. It’s now also possible to hide the tab completely if you just to want to share a plain code snippet without the window-look.

📋 Upload Images from the Clipboard

It’s now possible to upload an image directly from your clipboard. When you have an image in your clipboard and you’re on the snappify Editor, just paste it and it will be uploaded so you can use it right away.

Copy & Paste Elements in the Editor

Another clipboard improvement is that you can now copy & paste the selected elements in the snappify Editor.

Just select the element(s) you want to copy, pess + C to copy and then + V to paste them again.

This even works across different snaps! So when you have a special group of elements you want to reuse in different snaps, just copy and paste them onto a new snap 🥳

We’ve also prepared a video where you can get a better overview about those new features:

🙌 Snapping Guidelines

From now on you see snapping guidelines while dragging an element.

This helps you to better align elements to each other and the center / edges of the background.

Multi Selection

It’s now also possible to select multiple elements at once and drag them around together.

You can even apply alignment options to your multi-selection on the right toolbar.

We’ve also prepared a video where you can get a better overview about those new features:

🥳 New Dashboard

Our new dashboard is live and replaces the old Snaps modal!

It’s something several users asked for already and finally introduces a new way to organize and keep a better overview about your snaps.

You’re now able to create several folders and sub-folders to bring more structure into your workflow when using snappify.

If you miss something particular in the new dashboard or have essential additions in mind, please reach out to us! 😄

🎉 Embed your snaps via an iframe

We’re proud to tell you that Pro users are now able to embed their snaps via an iframe.

That means you’re now able to embed an interactive version of your snap into your own website / blog! Additionally users can easily copy the code with a new “Copy” button which is visible when hovering over a snippet.

Our next goal is to make snaps easily embeddable into blogging platforms like Medium, dev.to or Hashnode 😎

Closed Beta for the snappify API

We’re also excited to tell you that we launched a closed Beta for the new snappify API! It’s a REST API which takes some configuration parameters and returns a beautifully styled image of your code snippet, like you’re used to from the snappify Editor.

We’re still looking for testers, so if you’re interested in giving it a try, pls just write a DM to Dominik and he will send you the instructions.

🚀 Share your snaps publicly!

All our Pro users now have the possibility to share their snaps via a public URL! And the groundbreaking thing here is: it’s not just an image, but an interactive version of your snap, where viewers can easily copy your code snippets!

Take a look at this example snap.

We would love to know your feedback about this new feature!

😻 snappify is live on ProductHunt 🥳

About a year ago we started developing snappify and our goal was to build a tool that makes it easy to create beautiful code snippets, while also provide our users a powerful editor which helps them to annotate and explain their snippets.

We are confident that snappify has grown to be a very helpful tool for developers around the world and therefore it's time to make more people aware of it via ProductHunt. 🙌

Your support definitely makes the difference and we'd be super happy if you check it out on ProductHunt and leave your feedback. 😻

😍 New arrow element

We’ve added a new arrow element which can be super helpful to point out specific areas of your code. You can drag it around and add as many points to it as you wish. Also have a look at the styling possibilities on the right toolbar!

Code Highlightings

Another feature we’re happy to release is Code Highlights.

You can now either “Washout” parts of your code to either blur them or gray them out. This can be helpful if the viewer should focus on specific parts of the code.

Additionally it’s now also possible to show lines as Added or Removed which can be used to emphasize changes in a code snippet.

Checkout the video below to see both features in action 👇

🤩 The textarea element is now a rich-text editor

From today our textarea is not a simple textarea containing only plaintext anymore. It’s now a fully fletched richtext editor, powered by the mighty tiptap editor! Watch the video below to get an overview how it works. 👇

snappify can now be embedded via an iframe

As you might know, snappify is already embedded into other products like FeedHive or ThreadStart via our npm package. But until now, only our old editor was embedded their.

We’re super excited that from today also our new editor ismbeddable via an iframe and is already live on FeedHive and ThreadStart! 🙌

📜 New font families for text elements

Pro users are now able to set a different font family for their text elements, which gives you even more possibility to customize the images of your code for your own brand. 🙌

New image upload modal

When you want to upload an image you’ll now see a fancy new modal where you’re also able to reuse recently uploaded images.

🔥 More authentication providers

From today it’s possible to sign up / login to snappify with more authentication providers than just Twitter. We’re happy to tell you that you’re now also able to use the following providers:

• Google
• LinkedIn
• Facebook

If there’s another provider you’d like to be added pls contact us.

(Monthly) recurring subscriptions

Until now it was only possible to subscribe to our Pro features by doing a one-time payment for a one-year subscription via Gumroad. We’ve implemented this as a quick solution to enable payments, but of course it wasn’t meant as a long-term solution.

Today we’re happy to announce that we’ve introduced recurring subscriptions via Paddle. Together with that, we additionally introduced monthly subscriptions.

Existing Pro users are able to subscribe via the new subscription model as soon as their initial one-year subscription runs out. If you have any questions don’t hesitate to contact us.

🤠 Profile info settings

It’s now possible to update your profile info settings. Define an avatar, full name and your username for several platforms which will then be reused in the profile info elements throughout your snaps.

If you select a profile info element you can choose the platform which should be used for this element on the right toolbar.

✨ New syntax highlighting with Shiki

We've refactored our code editor to do syntax highlighting with Shiki, a powerful tool which gives us the possibility to create precise syntax highlighting for well-known VS Code themes.

In the future we want to add the possibility to add custom themes and if you're missing a VS Code theme which you'd like to use in snappify, please don't hesitate to contact us so we can add it to our list of themes!

Free-Canvas

From now on the snap is centered on the canvas and can also be moved around by clicking the Scroll-Wheel on your mouse and dragging it around.

Additionally it's now possible to zoom in and out when you press + Scroll.

At the same time we could further improve the performance of our editor, which overall results in a very nice UX like you're used to from other design apps like Figma.

Shortcuts Overview

The snappify editor is getting more powerful over time and for better usability we already have a bunch of shortcuts to ease the process of creating beautiful code snippets.

To get a better overview about all of our shortcuts we introduced a new popover so you can get a nice overview! 🙌

✍️ Edit History

Everyone knows it can be annoying if you accidentally change something without the possibility to undo your changes. That's a problem from yesterday!

From now on you're able to Undo & Redo changes you did in your current snappify session.

Just have a look at the "Shortcuts" menu to see which keyboard shortcuts you can use depending on your operating system.