Rikki

Invision Community 5 has a brand new editing experience powered by a lightweight, fast React text editor built for mobile and modern browsers.
The venerable CKEditor v4 at the core of our current editor is starting to show its age, so we wanted a clean slate with Invision Community v5 with an editor that was optimized for mobile use, easily extensible and had a feature set that would take us into the next era of Invision Community and beyond.
The obvious choice was to consider the latest version of CKEditor, but it didn't fit our needs as it wasn't easily extensible, external plug-ins would no longer be possible, and its large footprint would affect page speed scores and be painful to use with a mobile connection.
After a long search, we settled on Tiptap as the base for our editor. Written in React, loaded in chunks when needed for optimal performance and with many APIs and extensibility options, it was the perfect fit.

Aside from the technical improvements, the editor offers new tools and a great base for writing our own plugins. I'll walk you through the main features throughout this blog. If you want a more technical deep dive, then please see my development blog.
The Toolbar
The toolbar has been redesigned to put the most commonly used styles first, with the least used styles and functions into an ellipses menu. The new paragraph menu contains the header styles, as well as the code block. The plus menu adds lists, boxes and quotes. The benefit of this new compact menu is that it displays just the same on mobile. Currently, there are different editor styles for desktops, tablets and mobiles with some style buttons removed to save space. With Invision Community 5, this is no longer the case. Even the smallest display gets all the functionality.
mobile-toolbar.mp4
 
 
Emojis & Icons
Emojis have become a great way to embellish writing and express emotion. The new emoji picker has been modernized with larger emojis and tooltips to showcase the emoji shortcodes.
The Icons tab, new for Invision Community 5, allows you to add Font Awesome Icons directly to your content.

Lastly, both the emoji selector and the shortcode suggestion dropdown support arrow-key navigation, so you don't have to move your hands from the keyboard to the mouse.
Content Boxes
The feature I'm personally most excited about is boxes.
The concept started as an abstraction of spoilers because sometimes you just want "a box" - a section that stands out from the rest of the content, something we do manually in our documentation and guides on this site. Each box has a tile and the following options:
Expandable - You can mark a box as "expandable" which is functionally the same as a spoiler. One improvement is that expandable boxes use native HTML details and summary elements instead of plain Javascript animated divs. Colors - You can optionally keep it grey on grey like spoilers, but I think that's so boring! The colors automatically adjust to the theme colors, so it will look great in dark and light mode. Float (left/right/none) - You can make the box align to the left or right of other content just like you can for images Width - When the box is floated, you can set the width to big, medium or small. Boxes.mp4
Link Expansion
Invision Community has long expanded some links, such as YouTube, offering more context or even a mini-player where appropriate.
With Invision Community 5, we've added support for embedding dynamic link previews using site metadata. This is a preview of a topic on our forum.

For those unaware, the Open Graph (OG) Protocol is essentially a way webpages can specify a title, image, and description to be dynamically embedded on another platform. This is the underlying technology when you see the link preview in Meta, X, Slack, or iMessage.
Code Blocks and Inline Code
The new editor adds inline, syntax-highlighted code blocks and inline code. Both formats can be applied via the toolbar, or optionally, you can wrap text in a single backtick (`) to convert it to an inline code block or triple backticks (```) to convert it to a code block.

The code blocks also support numerous languages for syntax highlighting, including a new custom highlighter for the Invision HTML Template Syntax (Invision Community theme creators and application developers, you're welcome!)
Semantic Headings and Relative Sizes
Invision Community 5 adds a block selector with headings 1 through 6 in the new editor. It's possibly the most common request I hear so that people can use consistent styling rather than just big bold text in a paragraph tag. Semantic headings are also ideal for SEO and accessibility.
In addition to the block selector, you can create headings with the corresponding markdown shortcut. Consecutive pound signs (#) at the start of a line followed by a space (the number of pounds corresponds to the "level" of the heading). For example ### creates a Heading 3 (<h3/>) creates the heading for you.
Using clear header tags means screen readers and search engines can better understand your content as using absolute font sizes, such as 16px, can make it unclear what type of element is actually being used. Is it a heading or just a paragraph with large bold text?
Furthermore, you may want different sizes depending on the content and device type. Mobile devices may benefit from a large base font size. So we added percent-based font sizes which change the font size based on whatever the default would be for that block.
text-menus.mp4
Further UX Improvements
The new editor in Invision Community 5 has several tangible improvements, including a mobile-first design.
In the current editor, some functionality was hidden behind modals and double clicks, which are either not obvious on mobile devices or not possible at all. The new editor no longer relies on modals and instead uses buttons and dropdown menus that work perfectly with mobile and other touch-based devices.
New Line Arrows
For block content, such as boxes, images and quotes, we've added the ability to create a new line before or after the block with the click of a button. This was an issue of frustration for mobile and touch devices where it was not always clear where the cursor was and a finger is a much less accurate aiming device!

Sticky Toolbar
Anyone who has authored a long piece of content knows the pain of scrolling up and down to get the toolbar in view. To make writing longer content less stressful, we've made the toolbar sticky so that it will always be fixed at the top of the editor after scrolling down.
sticky-toolbar.mp4
Markdown Style Shortcuts
One common request is to support markdown in the editor. While we opted not to include full markdown support, the new editor recognizes many markdown-style formatting shortcuts.
markdown.mp4
Colors
A common challenge with rich text editors on sites with multiple themes is colors often need to consistently look right across all themes. This is even more important with Invision Community 5, as it has a native dark mode feature. For this reason, we opted to offer a reduced set of color options that all adapt dynamically to the theme. I mentioned this about box colors above, but this is also true of the font color. The difference in shade is slight, but it's very noticeable without it. Toggling between light and dark mode will never produce unreadable text.
colors.mp4
We can't wait for you to try the new editor; it has already been very popular with our small testing group. Which feature are you most looking forward to trying?

View full blog entry

I clicked into this very excited, thinking you'd be showing off an AI-generated 'executive summary' of topics. Genuinely curious: why not feed those posts with high impact signals into an LLM to summarize? Not long ago your approach would have been great, but now I think will be in danger of feeling pretty clunky, manual and old fashioned. This seemed like it'd be the perfect opportunity to use a modern tool to solve the problem.

My personal take is that we can wait for Google to scrape all of our content to start offering AI generated summaries on Google (which is already happening - hello Bard!), or we can start doing it ourselves.
I'm sure there's a worthy existential debate about the importance of sourcing content from reputable sources or trusted people on forums, but at the end of the day, if I'm a user searching for the fastest and most accurate solution, do I want a condensed topic (because honestly that's all the topic summary really is) of 30 discrete replies that I still need to read through and interpret or do I want an actual well-written summary that's short, sweet, to the point.
There's a race to convenience that LLMs are unleashing on our public content. We can either own those summaries ourselves, with links and references to other parts of our community, or we can let Google do it for us without ever giving us any traffic.  

I clicked into this very excited, thinking you'd be showing off an AI-generated 'executive summary' of topics. Genuinely curious: why not feed those posts with high impact signals into an LLM to summarize? Not long ago your approach would have been great, but now I think will be in danger of feeling pretty clunky, manual and old fashioned. This seemed like it'd be the perfect opportunity to use a modern tool to solve the problem.

I clicked into this very excited, thinking you'd be showing off an AI-generated 'executive summary' of topics. Genuinely curious: why not feed those posts with high impact signals into an LLM to summarize? Not long ago your approach would have been great, but now I think will be in danger of feeling pretty clunky, manual and old fashioned. This seemed like it'd be the perfect opportunity to use a modern tool to solve the problem.

I clicked into this very excited, thinking you'd be showing off an AI-generated 'executive summary' of topics. Genuinely curious: why not feed those posts with high impact signals into an LLM to summarize? Not long ago your approach would have been great, but now I think will be in danger of feeling pretty clunky, manual and old fashioned. This seemed like it'd be the perfect opportunity to use a modern tool to solve the problem.

I clicked into this very excited, thinking you'd be showing off an AI-generated 'executive summary' of topics. Genuinely curious: why not feed those posts with high impact signals into an LLM to summarize? Not long ago your approach would have been great, but now I think will be in danger of feeling pretty clunky, manual and old fashioned. This seemed like it'd be the perfect opportunity to use a modern tool to solve the problem.

I clicked into this very excited, thinking you'd be showing off an AI-generated 'executive summary' of topics. Genuinely curious: why not feed those posts with high impact signals into an LLM to summarize? Not long ago your approach would have been great, but now I think will be in danger of feeling pretty clunky, manual and old fashioned. This seemed like it'd be the perfect opportunity to use a modern tool to solve the problem.

I clicked into this very excited, thinking you'd be showing off an AI-generated 'executive summary' of topics. Genuinely curious: why not feed those posts with high impact signals into an LLM to summarize? Not long ago your approach would have been great, but now I think will be in danger of feeling pretty clunky, manual and old fashioned. This seemed like it'd be the perfect opportunity to use a modern tool to solve the problem.

Looks great, good job on tackling some of the oldest bug bears 🔥

Shout out to the video editor you've hired ( 😉 ) - the preview videos you're putting out for v5 have been really slick. Way better than those Canva-esque templated ones!

Shout out to the video editor you've hired ( 😉 ) - the preview videos you're putting out for v5 have been really slick. Way better than those Canva-esque templated ones!

This looks really, really good. I'm so glad to see new CSS underpinning everything - about time! Automatically creating color palettes from main colors is lovely too. While we worked towards some of these changes with v4 it was always difficult without breaking the entire ecosystem. I'm happy you've managed to get a clean break.

This looks really, really good. I'm so glad to see new CSS underpinning everything - about time! Automatically creating color palettes from main colors is lovely too. While we worked towards some of these changes with v4 it was always difficult without breaking the entire ecosystem. I'm happy you've managed to get a clean break.

This looks really, really good. I'm so glad to see new CSS underpinning everything - about time! Automatically creating color palettes from main colors is lovely too. While we worked towards some of these changes with v4 it was always difficult without breaking the entire ecosystem. I'm happy you've managed to get a clean break.

This looks really, really good. I'm so glad to see new CSS underpinning everything - about time! Automatically creating color palettes from main colors is lovely too. While we worked towards some of these changes with v4 it was always difficult without breaking the entire ecosystem. I'm happy you've managed to get a clean break.

This looks really, really good. I'm so glad to see new CSS underpinning everything - about time! Automatically creating color palettes from main colors is lovely too. While we worked towards some of these changes with v4 it was always difficult without breaking the entire ecosystem. I'm happy you've managed to get a clean break.

I think personally I would dispute the idea of 'dead space' as a concept. You don't have to fill every pixel of a page with content, and doing so could actually have a negative effect by taking focus away from the actual content people are trying to find.
Facebook doesn't do it, Reddit doesn't do it, Instagram doesn't do it, so that should be a good indicator I think.

I think personally I would dispute the idea of 'dead space' as a concept. You don't have to fill every pixel of a page with content, and doing so could actually have a negative effect by taking focus away from the actual content people are trying to find.
Facebook doesn't do it, Reddit doesn't do it, Instagram doesn't do it, so that should be a good indicator I think.

I think personally I would dispute the idea of 'dead space' as a concept. You don't have to fill every pixel of a page with content, and doing so could actually have a negative effect by taking focus away from the actual content people are trying to find.
Facebook doesn't do it, Reddit doesn't do it, Instagram doesn't do it, so that should be a good indicator I think.

Welcome to the third video of our sneak peak series! Today, we're really excited to introduce you to the new Theme Editor!
Built entirely from scratch, the new editor provides an instant, live preview of your theme, as soon as you modify a setting. It's a zero-code approach to creating themes, and has been designed to ensure your theme adheres to your color scheme and looks great on every device, with very little effort. Let's take a closer look!
 
Paragraph 1.mp4
 
To the left of the editor, you’ll see a live preview of your community. You can navigate to any page, as if you were browsing your site normally. At the top left of the editor, you’ll find icons which change the theme between the light and dark color schemes. Below that are buttons which change the viewport size, from desktop, to tablet, to mobile. This is a really convenient way to ensure your theme looks great on every device, without needing to manually resize your browser window.
Lets take a closer look at the Color Palette.
Editing colors in version 4 was a fairly time consuming process. For example, modifying the color scheme from the default blue to another color meant that 26 theme settings needed to be changed. In contrast, the Version 5 theme is powered by just 3 colors: Primary colors are responsible for styling the main elements on your page, such as the Start new topic button. Secondary colors control minor elements, such as pagination links, while the Base color is responsible for controlling the overall tint on your site.
Clicking on these colors opens a color picker. Let’s change this blue color to yellow.
 
Video 2.mp4
 
You’ll notice two things have happened here. First, the preview window updated as soon as we modified the color. All elements which were previously blue, now use yellow, such as the Start new topic button. Secondly, the text color in our button has changed from white to black. This is our automatic contrast feature and it ensures our text is easy to read on our new yellow background, since white text may be more difficult to read for some viewers.
Below the color picker is a text box, with our color displayed in HSL. You can paste your own colors in this box, in any color format and that color will be applied to your elements.
 
Video 3.mp4
 
The Base color controls the tint of your backgrounds and text colors. Let's try a few examples to demonstrate how easy it is to recolor your theme.
 
Video 4.mp4
 
Next up are Logos! Invision Community 5 has three logo types: a text logo, an image logo for desktops and an image logo for mobiles. Let’s edit our text logo.
 
Video 5.mp4
 
After changing the text to “Theme Editor Demo”, we can see that the logo in our preview window updates instantly with our new text. Below that, we have multiple options to help us style the text logo, such as font-family These fonts are a combination of system fonts and web fonts. The web fonts are hosted locally on your site for optimal performance. Additionally, we can also change the font-weight and font-size. We might want a different font-size for mobile logos, so that can be edited too. We can see a live preview by changing our viewport to the mobile option.
If you’d prefer to use an image logo, you can assign it using the Image Logo options. Image logos are made up of 2 upload fields, one for the light theme and one for the dark theme. Below these upload fields, a slider lets you resize your logo so it fits neatly.
 
Video 6.mp4
 
Layout options let you assign the default layouts in your community. In our first sneak peak video, we showcased the new side panel layout, feed view for forum categories, and compact view for topics. These can all be enabled via the theme editor using a simple select menu.
 
Video 7.mp4
 
Lets explore some Color options! In the Header panel, we can see a list of elements we can customize. Clicking on an element opens the Swatch List, which is a list of 22 colors that are powered by the Base, Primary and Secondary colors from earlier. We have 6 "light" base colors, 6 "dark" base colors as well as various shades of our primary and secondary colors. Clicking on any of these swatches will apply that color to your element.
But what if none of these colors suit your requirement? That’s where the Color Picker comes in handy. Here, we can easily choose any color, or even paste in our own color like before.
 
Video 8.mp4
 
A major hurdle with themes in version 4 was customising the header. Depending on the complexity, this would typically involve modifications to both the CSS and HTML. That is a thing of the past with version 5! If we flick over to our Settings tab, you’ll see a brand new interface for customising the header. A new drag and drop feature allows you to easily reposition header elements without touching a single line of code.
 
Video 9.mp4
It’s an incredibly fun tool to play with, and we’re really excited to hear what you think!
Below the drag and drop area, we can customise the header further by using sliders to adjust its height, or we can enable navigation icons with a single click. Body settings let you can customise global elements such as the body background color, text colors, the max-width of your site, the font-family, font-size and more.
Editing Content boxes has always required code modifications in the past. Using this new editor, we can adjust not only the colors of the boxes, but also the borders and shadows. Theme editing has honestly never been this easy!
 
Video 10.mp4
And there you have it! Our brand new theme editor. With a few simple clicks and drags, we've been able to create a customised theme that looks great on desktops and mobiles, with a new color scheme, new logos, a customised header, new page layouts and restyled content boxes - all without touching a single line of code.
Speaking of code, for those of you who want to apply more advanced customisations, we’ve added a really convenient way to access your custom CSS file, via a new dialog box.
Video 11.mp4
And last but not least - the new theme editor is fully responsive, so even if you’re away from the desk, so you’ll be able to change colours and settings, upload new logos, redesign your header and even add your own code!
 
Video 12.mp4
 
Developing this new editor has been a lot of fun, and it’s even more fun to use. Themes have never been easier to edit and we're really excited for you all to get your hands on it so you can have a play for yourself - but for now, let us know what you think the comments, and we’ll see you next time!

View full blog entry

I think personally I would dispute the idea of 'dead space' as a concept. You don't have to fill every pixel of a page with content, and doing so could actually have a negative effect by taking focus away from the actual content people are trying to find.
Facebook doesn't do it, Reddit doesn't do it, Instagram doesn't do it, so that should be a good indicator I think.

I see @Ehren came around to Tailwind 😉 

I think personally I would dispute the idea of 'dead space' as a concept. You don't have to fill every pixel of a page with content, and doing so could actually have a negative effect by taking focus away from the actual content people are trying to find.
Facebook doesn't do it, Reddit doesn't do it, Instagram doesn't do it, so that should be a good indicator I think.

Looks great, good job on tackling some of the oldest bug bears 🔥