DEV Community: Søren Kottal

Customizing Umbraco ModelsBuilder Output

Søren Kottal — Mon, 02 Feb 2026 11:33:05 +0000

Umbraco's ModelsBuilder is a fantastic tool that generates strongly-typed models from your document types. But what if you want to customize the generated output? Maybe you want to add property alias constants or other custom code to your models.

In this article, I'll show you how to create a custom ModelsGenerator that post-processes the generated files to add your own customizations.

The Problem

When working with Umbraco, you often need to reference property aliases as strings - for example, when using SetValue() while creating or editing content through the ContentService, or maybe you need the dynamic property access from IPublishedContent. This means scattering magic strings throughout your codebase:

// setting a property value on IContent
var title = content.SetValue("pageTitle", "New Title");

// checking for a property on IPublishedContent
var items = content.Children.Where(x => x.HasValue("featuredImage"));

If a property alias changes, you'll need to hunt down every occurrence. It would be much better to have strongly-typed constants for each property alias, so you get compile-time safety and IntelliSense support.

ModelsBuilder does provide a way to get the property aliases from the document type, but it is rather verbose, and it requires a dependency on IPublishedContentTypeCache:

@using Umbraco.Cms.Core.PublishedCache
@inject IPublishedContentTypeCache _contentTypeCache;
@{
    var blocksPropertyAlias = ContentPage.GetModelPropertyType(_contentTypeCache, x => x.Blocks)?.Alias;
}

The Solution

We can create a custom ModelsGenerator that runs after the standard generation and post-processes the output files. This approach:

Doesn't require modifying Umbraco's source code
Works with the existing ModelsBuilder pipeline
Allows for any kind of text manipulation on generated files

Here's the full implementation:

using Microsoft.Extensions.Hosting;
using Microsoft.Extensions.Options;
using System.Text;
using System.Text.RegularExpressions;
using Umbraco.Cms.Core.Configuration.Models;
using Umbraco.Cms.Infrastructure.ModelsBuilder;
using Umbraco.Cms.Infrastructure.ModelsBuilder.Building;
using Umbraco.Extensions;

namespace MyProject.ModelsGenerators;

public class MyOwnModelsGenerator(
    UmbracoServices umbracoService,
    IOptionsMonitor<ModelsBuilderSettings> config,
    OutOfDateModelsStatus outOfDateModels,
    IHostEnvironment hostingEnvironment)
    : ModelsGenerator(umbracoService, config, outOfDateModels, hostingEnvironment), IModelsGenerator
{
    public new void GenerateModels()
    {
        base.GenerateModels();

        var modelsDirectory = config.CurrentValue.ModelsDirectoryAbsolute(hostingEnvironment);
        if (!Directory.Exists(modelsDirectory)) return;

        foreach (var file in Directory.GetFiles(modelsDirectory, "*.generated.cs"))
        {
            var fileContents = File.ReadAllText(file);
            var newFileContents = AddPropertyAliasConstants(fileContents);

            if (newFileContents != fileContents)
            {
                File.WriteAllText(file, newFileContents);
            }
        }
    }

    private static string AddPropertyAliasConstants(string fileContents)
    {
        var marker = "public new const string ModelTypeAlias =";
        var index = fileContents.IndexOf(marker, StringComparison.Ordinal);
        if (index == -1) return fileContents;

        var pattern = @"\[.*ImplementPropertyType\(""([^""]+)""\)\][\s\S]*?public\s+(?:virtual\s+)?[\w\.:<>]+\s+([A-Za-z0-9_]+)\s*(?:{|=>)";
        var matches = Regex.Matches(fileContents, pattern);

        var sb = new StringBuilder();
        sb.Append("public new static class ModelPropertyAliases\n\t\t{\n");
        foreach (Match match in matches)
        {
            var alias = match.Groups[1].Value;
            var propName = match.Groups[2].Value;
            sb.Append($"\t\t\tpublic const string {propName} = \"{alias}\";\n");
        }
        sb.Append("\t\t}\n\n\t\t");

        return fileContents.Insert(index, sb.ToString());
    }
}

How It Works

The custom generator does a few key things:

1. Inheriting from ModelsGenerator

By inheriting from ModelsGenerator and implementing IModelsGenerator, we can override the generation behavior while still using all the built-in functionality.

public class MyOwnModelsGenerator : ModelsGenerator, IModelsGenerator

2. Post-Processing Generated Files

The GenerateModels() method first calls base.GenerateModels() to run the standard generation, then iterates through all *.generated.cs files to apply our customizations:

public new void GenerateModels()
{
    base.GenerateModels();

    var modelsDirectory = _config.ModelsDirectoryAbsolute(_hostingEnvironment);
    foreach (var file in Directory.GetFiles(modelsDirectory, "*.generated.cs"))
    {
        // Post-process each file...
    }
}

3. Adding Property Alias Constants

The AddPropertyAliasConstants method uses regex to find all properties marked with [ImplementPropertyType] and extracts both the alias and property name. It then generates a nested static class containing constants for each property:

public new static class ModelPropertyAliases
{
    public const string PageTitle = "pageTitle";
    public const string FeaturedImage = "featuredImage";
    public const string Blocks = "blocks";
}

Registering the Custom Generator

To use your custom generator, you need to register it with Umbraco's dependency injection. Add this to your startup configuration:

builder.Services.AddSingleton<IModelsGenerator, MyOwnModelsGenerator>();

Or if you're using a composer:

public class ModelsGeneratorComposer : IComposer
{
    public void Compose(IUmbracoBuilder builder)
    {
        builder.Services.AddSingleton<IModelsGenerator, MyOwnModelsGenerator>();
    }
}

Using the Generated Constants

Once the models are regenerated, you can use the constants throughout your code:

// Before: magic strings
content.SetValue("pageTitle", "New Title");

// After: strongly-typed constants
content.SetValue(HomePage.ModelPropertyAliases.PageTitle, "New Title");

// Works great in LINQ queries too
var featured = content.Children
    .Where(x => x.HasValue(Article.ModelPropertyAliases.FeaturedImage));

Now if a property alias changes, you'll get a compile-time error instead of a runtime surprise.

Final Thoughts

Customizing ModelsBuilder output gives you more control over your generated code without fighting against the built-in tooling. By post-processing the generated files, you can add compile-time safety features like property alias constants while keeping all the benefits of automatic model generation.

The approach shown here - inheriting from ModelsGenerator and processing files after generation - is clean, maintainable, and survives Umbraco upgrades since it doesn't modify any core code.

Enhanced Event Logs and Deployment Monitoring for Kudu in Umbraco Cloud

Søren Kottal — Mon, 26 Jan 2026 09:11:18 +0000

When working with Umbraco Cloud, I occasionally need to access Kudu for debugging and deployment tasks. You can access Kudu by clicking the "Kudu" button in your site's dashboard, or directly via the URL: https://<site-name>.scm.<cloud-region>.umbraco.io (where the cloud region might be euwest01, for example).

When a site fails to start or a deployment fails without clear errors, the event log in Kudu can provide crucial insights. However, the raw experience leaves much to be desired.

To solve this problem, I created two userscripts that enhance the Kudu interface.

What is a userscript?

A userscript is a program, usually written in JavaScript, for modifying web pages to augment browsing. Uses include adding shortcut buttons and keyboard shortcuts, controlling playback speeds, adding features to sites, and enhancing the browsing history.

To use a userscript, you need a userscript manager. There are several available, but the most popular is Tampermonkey. Tampermonkey is available for Chrome, Firefox, and Edge.

Visualizing Event Logs

First thing to look at is the event log of the site. The event log contains information from IIS, and tells you any problems when starting the site. It can also contain information about failed deployments, and other issues.

But, it's not the most user-friendly experience. It's a raw XML file, and you have to manually parse it.

The event log is located at /LogFiles/eventlog.xml
It can be a massive XML file with thousands of entries
The most recent (and relevant) information is at the bottom
There's no syntax highlighting or formatting
You have to manually parse XML in your head

This userscript adds a new "Event Log" tab to the Kudu interface, providing a much better experience:

Parsed and formatted: Events are displayed in a clean table format
Most recent first: The latest events appear at the top (no more scrolling)
Color-coded: Each event type has its own color for quick identification
Structured columns: Event time, type, message, and source are clearly separated

The event log helps you diagnose issues like missing DLLs, IIS startup failures, configuration problems, and data-related errors.

How to use it

Install the Kudu Event Log Viewer userscript from my umbraco-userscripts repository
Navigate to your Umbraco Cloud Kudu interface (e.g., *.scm.euwest01.umbraco.io)
Click the "Event Log" link in the navbar
Click "Load Event Log" to fetch and display events
Events are displayed in Bootstrap panels with full details

Tracking Deployments

When using CI/CD with Umbraco Cloud, deployment visibility is limited compared to traditional git push deployments. You lose the immediate feedback from git logs about build status and deployment progress.

Normally, when a deployment fails, you need to manually navigate through files in /site/deployments to find:

Which deployment is currently active
Individual deployment folders with logs and status files
Scattered information across multiple locations

The Deployment Viewer userscript consolidates all this information into a single dashboard:

Deployment status: See the current state of all deployments
Live logs: View logs for each deployment
Auto-refresh: Enable live updates to monitor deployments in real-time
Manual triggers: Start a new deployment without making a git change

How to use it

Install the Umbraco Cloud Deployment Viewer userscript from my umbraco-userscripts repository
Navigate to your Umbraco Cloud Kudu interface (e.g., *.scm.euwest01.umbraco.io)
Click the "Deployments" link in the navbar
View the latest deployment status and log
Click "Auto-refresh" to enable live log and status updates
Click "Trigger New Deployment" to start a new deployment
Click on any deployment in the history table to view full details in a modal
Click file counts to view the deployment manifest

Final Thoughts

While Umbraco Cloud's dashboard provides excellent visibility for most scenarios, these userscripts fill important gaps when you need to dig deeper. They transform Kudu from a basic file browser into a powerful debugging and deployment monitoring tool.

Both userscripts are available on GitHub. Give them a try the next time you're troubleshooting a deployment issue or investigating a site failure.

Make Umbraco’s Welcome Dashboard Your Own

Søren Kottal — Mon, 19 Jan 2026 07:26:41 +0000

Umbraco comes with a default Welcome dashboard in the backoffice. It displays news from Umbraco HQ along with handy links to documentation, training, and other community resources.

That’s great for developers, but when you’re building Umbraco sites for clients, those links are often not the most relevant. In fact, the traditional recommendation has often been to simply remove the Welcome dashboard entirely.

But with the current backoffice (which I should probably stop calling new by now), there are plenty of extension points - and the Welcome dashboard is one of them.

So instead of removing it, why not use it for your own content?

Extending the Welcome dashboard

The Welcome dashboard is powered by a service in the backend, and you can replace or extend its behaviour by implementing the INewsDashboardService interface in your own C# code.

Once you do that, Umbraco will use your implementation to populate the dashboard.

All you need to return is a NewsDashboardResponseModel, which contains a collection of items to display. Each item supports:

A header
Body text
An image (URL + alt text)
A link URL
Button text
A priority (High, Medium, or Low)

The dashboard will automatically sort the items by priority before rendering them.

A (slightly useless) example implementation

As a simple demonstration, here’s an intentionally useless implementation that displays the weather from 12 random locations on Earth every time the dashboard loads.

using System.Text.Json;
using Umbraco.Cms.Api.Management.Services.NewsDashboard;
using Umbraco.Cms.Api.Management.ViewModels.NewsDashboard;

public class UselessNewsDashboardService : INewsDashboardService
{
    private readonly HttpClient _httpClient;
    private readonly AppCaches _appCaches;

    public GiNewsDashboardService(HttpClient httpClient, AppCaches appCaches)
    {
        _httpClient = httpClient;
        _appCaches = appCaches;
    }

    public async Task<NewsDashboardResponseModel> GetItemsAsync()
    {
        // fetch some data - this depends on your usecase!
        var locations =
            await _appCaches.RuntimeCache.GetCacheItemAsync(
                "randomWeather",
                async () => await GetWeatherFromRandomLocationsAsync(),
                TimeSpan.FromHours(1)
            ) ?? [];

        // build the response model
        var response = new NewsDashboardResponseModel()
        {
            Items = locations.Select(x => new NewsDashboardItemResponseModel()
            {
                Header = x.Title,
                Priority = "High", // or Medium or Low
                Url = x.Url,
                ImageUrl = x.ImageUrl,
                Body = x.ShortDescription,
                ButtonText = "Go to website",
            }),
        };

        return response;
    }

    // below are methods for communicating with the weather API 
    // - you don't need these

    public async Task<WeatherResult> GetWeatherAsync(double lat, double lon)
    {
        // this is just to prevent 529 Too many requests
        await Task.Delay(Random.Shared.Next(100, 1000));

        var url =
            $"https://api.open-meteo.com/v1/forecast"
            + $"?latitude={lat}&longitude={lon}"
            + $"&current_weather=true";

        var json = await _httpClient.GetStringAsync(url);
        using var doc = JsonDocument.Parse(json);

        var current = doc.RootElement.GetProperty("current_weather");

        var temperature = current.GetProperty("temperature").GetDouble();
        var weatherCode = current.GetProperty("weathercode").GetInt32();

        var description = GetDescription(weatherCode);
        var imageUrl = GetImageUrl(weatherCode);

        return new WeatherResult(
            Title: $"{description}, {temperature}°C",
            ShortDescription: $"Weather at {lat}/{lon}",
            ImageUrl: imageUrl,
            Url: $"https://www.open-meteo.com/en/forecast?latitude={lat}&longitude={lon}"
        );
    }

    public record WeatherResult(string Title, string ShortDescription, string ImageUrl, string Url);

    public static string GetDescription(int code) =>
        code switch
        {
            0 => "Clear sky",
            1 or 2 or 3 => "Partly cloudy",
            45 or 48 => "Fog",
            51 or 53 or 55 => "Drizzle",
            61 or 63 or 65 => "Rain",
            71 or 73 or 75 => "Snow",
            80 or 81 or 82 => "Rain showers",
            95 => "Thunderstorm",
            _ => "Unknown weather",
        };

    public static string GetImageUrl(int code) =>
        code switch
        {
            0 => "https://cdn-icons-png.flaticon.com/512/869/869869.png",
            1 or 2 or 3 => "https://cdn-icons-png.flaticon.com/512/1163/1163661.png",
            61 or 63 or 65 => "https://cdn-icons-png.flaticon.com/512/3351/3351979.png",
            71 or 73 or 75 => "https://cdn-icons-png.flaticon.com/512/642/642102.png",
            95 => "https://cdn-icons-png.flaticon.com/512/1146/1146869.png",
            _ => "https://cdn-icons-png.flaticon.com/512/1779/1779940.png",
        };
}

You also have to register the service with a Composer, like so:

using Umbraco.Cms.Core.Composing;

public class UselessNewsDashboardComposer : IComposer
{
    public void Compose(IUmbracoBuilder builder)
    {
        builder.Services.AddSingleton<INewsDashboardService, UselessNewsDashboardComposer >();
    }
}

And there you have it:

This example obviously isn’t very useful - but it shows how little code is required to take control of the dashboard content.

A practical use case

Where this does become useful is for agencies and teams building Umbraco sites for clients.

Instead of showing Umbraco HQ news, you can use the Welcome dashboard to:

Share important project updates
Announce new features or releases
Provide onboarding instructions
Link to internal documentation or support channels
Communicate maintenance windows or known issues

In other words, it becomes a direct communication channel inside your client’s CMS.

Final thoughts

Rather than removing the Welcome dashboard altogether, extending it allows you to turn an otherwise generic screen into something genuinely valuable for your clients.

With just a small custom service, you can make the Umbraco backoffice feel more tailored, more informative, and more aligned with the people actually using it.

Readable, simple Chinese URL segments in Umbraco with NPinyin

Søren Kottal — Fri, 09 Jan 2026 08:29:17 +0000

On a recent project, the client had a Chinese version of their site. The texts and titles were, of course, written using Chinese characters, which meant that the URLs were automatically generated using those characters as well.

For SEO and UX reasons, we wanted the URLs to use Latin characters instead. While search engines are perfectly capable of indexing Chinese URLs, we felt that Latin URLs would perform better in practice.

Our reasoning was:

Latin URLs are more readable (especially since the audience was not exclusively Chinese), which we assumed would lead to higher click-through rates
Hyphenated Latin words provide clearer URL keyword signals
Sharing URLs and linking to them is much easier with Latin characters than with encoded Chinese characters

For example, a title like:

击掌！你太棒了！

would normally generate a URL segment using Chinese characters. With pinyin conversion applied, it instead becomes:

/ji-zhang-ni-tai-bang-le

The latter is much easier to read, share, and reason about, especially in mixed-language environments.

Converting Chinese characters to Latin using pinyin

Umbraco already tries to convert special characters when generating URLs, but the default character replacement set is quite limited. You can see the default configuration in the request handler settings in the documentation article about Request Handler Settings.

Because of the nature of Chinese characters, having more than 50,000 of them, mapping each character to a Latin equivalent is not feasible. Instead, we can use pinyin, which is a Latin-based phonetic transcription system for Chinese characters.

Using pinyin allows us to convert Chinese text into readable Latin equivalents without maintaining huge character maps. There is an open-source NuGet package called NPinyin.Core that makes this conversion straightforward. It’s lightweight and integrates cleanly into existing logic.

This approach also works well for mixed-language titles, such as:

击掌！You Rock!

which results in:

/ji-zhang-you-rock

Using a custom URL segment provider in Umbraco

With the conversion logic in place, the next step was to make Umbraco use it when generating URL segments.

When Umbraco generates URL segments, it runs through a set of URL segment providers, and it’s possible to create a custom one. The process is simple and well documented.

By adding a small amount of additional logic to separate Chinese characters with dashes, we ended up with a short and simple custom segment provider that generates readable, SEO-friendly Latin URLs for Chinese pages.

** Note: **
This approach converts each Chinese character to its pinyin representation and inserts dashes between characters. While this is not full linguistic word segmentation, it produces consistent, readable URL segments without adding unnecessary complexity.

Example implementation

using System.Text;
using NPinyin;
using Umbraco.Cms.Core.Models;
using Umbraco.Cms.Core.Strings;

namespace Project.Core.Urls;

// Custom URL segment provider that wraps Umbraco's default provider
// and applies Chinese to Pinyin conversion on top.
public class ChineseUrlSegmentProvider : IUrlSegmentProvider
{
    // We delegate to the default provider first, so we keep
    // Umbraco's built-in behavior for non-Chinese characters.
    private readonly DefaultUrlSegmentProvider _defaultUrlSegmentProvider;

    public ChineseUrlSegmentProvider(IShortStringHelper shortStringHelper)
    {
        _defaultUrlSegmentProvider = new DefaultUrlSegmentProvider(shortStringHelper);
    }

    public string? GetUrlSegment(IContentBase content, string? culture = null)
    {
        // Let Umbraco generate the initial URL segment,
        // then post-process it with our custom logic.
        return ChineseToPinyinWithDashes(
            _defaultUrlSegmentProvider.GetUrlSegment(content, culture)
        );
    }

    // Converts Chinese characters to pinyin and inserts dashes
    // between consecutive Chinese characters to improve readability.
    private static string? ChineseToPinyinWithDashes(string? input)
    {
        if (input is null)
        {
            return input;
        }

        var sb = new StringBuilder();
        var lastWasChinese = false;

        foreach (var c in input)
        {
            if (IsChinese(c))
            {
                // Insert a dash between consecutive Chinese characters
                if (sb.Length > 0 && lastWasChinese)
                {
                    sb.Append('-');
                }

                // Convert the individual character to pinyin
                sb.Append(Pinyin.GetPinyin(c.ToString()));
                lastWasChinese = true;
            }
            else
            {
                // Non-Chinese characters are passed through unchanged
                sb.Append(c);
                lastWasChinese = false;
            }
        }

        return sb.ToString();
    }

    // Simple Unicode range check for CJK Unified Ideographs
    private static bool IsChinese(char c)
    {
        return c >= 0x4E00 && c <= 0x9FFF;
    }
}

Results

With this approach in place, Chinese pages now automatically generate clean, readable, and shareable URL segments without any manual intervention. It works equally well for fully Chinese titles and mixed-language content, and it integrates cleanly into Umbraco’s existing routing pipeline.

The solution is lightweight, easy to maintain, and avoids the complexity of large character-mapping tables or full linguistic word segmentation — making it a practical choice for real-world Umbraco projects.

Say Hello to uMux: Sync videos from Umbraco to Mux effortlessly

Søren Kottal — Tue, 23 Dec 2025 19:06:54 +0000

uMux is a brand new, free and open source, package for Umbraco 17+, that takes the hassle out of hosting videos on your website. Just drop your videos into Umbraco, and uMux will automatically upload and sync them with Mux. That means you get all the power of Mux’s streaming, thumbnails, and analytics, while still working in the CMS you love.

Why uMux?

For years, I found myself recommending platforms like Vimeo or similar to clients because they’re user-friendly and handle video streaming well. But there was always a catch: editors had to jump between systems, upload videos to Vimeo, then copy and paste IDs or embed codes back into Umbraco.

It’s clunky, error-prone, and just not the smooth experience editors deserve.

With uMux, my goal was to keep everything in one place.

Editors can upload and manage videos right inside Umbraco, just like they’re used to, while still getting all the benefits of a modern video platform like Mux. No more juggling logins, no more copy-pasting codes, just a seamless workflow.

What does it do?

uMux handles all the behind-the-scenes magic—your videos get sent to Mux, and Mux handles encoding, so the videos are ready to stream anywhere. Editors don’t have to worry about file types, encoding settings, or technical video stuff. It just works.

Why use a third party video host?

Serving big video files from your own server can be a pain, especially if you’re on Umbraco Cloud or have bandwidth limits. Here’s why letting Mux handle your videos is a game-changer:

Save your bandwidth
Mux takes care of the heavy lifting, so your Umbraco site stays speedy and you don’t get hit with surprise bandwidth bills.
Smooth streaming for everyone
Mux automatically streams the best quality for each viewer’s device and connection, so videos load fast and play without hiccups.
Global delivery
Your videos are delivered from servers close to your users, wherever they are in the world.

In addition to those obvious benefits, Mux also gives you some handy features around the videos you host with them.

Instant thumbnails & GIFs
Need a thumbnail or animated preview? Mux generates them for you—no extra work needed.
Awesome analytics
See how your videos are performing and where viewers might be dropping off.
Security & scalability
No worries about traffic spikes or unauthorized access—Mux has you covered.
Works everywhere
Embed videos in any player that supports HLS, or use Mux’s own slick player.
Automatic encoding
Mux encodes your videos in all the right formats, so you don’t have to think about codecs or compatibility.

Getting started

Install uMux:

  dotnet add package Umbraco.Community.uMux

Add your Mux credentials to your appsettings.json or as environment variables.
Add the Mux Sync property editor to your media types in Umbraco.
Upload your videos as usual - uMux takes care of the rest!

For all the nitty-gritty details, check out the README.

Umbraco Marketplace Package Sync Bookmarklet

Søren Kottal — Fri, 28 Mar 2025 12:59:54 +0000

The Umbraco Marketplace automatically lists NuGet packages with a specific tag. New packages are indexed daily at 4:00 AM UTC, while updates to existing packages are checked every two hours.

However, waiting for the automatic indexing can be a test of patience when you're eager to see your new package listed and verify everything is correct.

Fortunately, the Umbraco Marketplace API allows you to trigger indexing for a single package using an HTTP POST request, as detailed in the documentation.

To streamline this process, I've created a bookmarklet that you can use directly from the NuGet package details page. This bookmarklet automatically extracts the package ID and sends it to the Marketplace endpoint for immediate indexing.

I'm happy to share it with the community, so feel free to grab it and use it yourself!

How to Use

Navigate to a NuGet package details page on nuget.org (e.g., https://www.nuget.org/packages/Umbraco.Community.Contentment).
Click the "Sync with Marketplace" bookmarklet in your bookmarks bar.
An alert will confirm if the sync was initiated successfully or display any error messages. Eg. error 429, if you are being too eager, with too many requests.

Say Goodbye to Tedious Icon Imports in Umbraco with Icoover!

Søren Kottal — Mon, 17 Mar 2025 15:06:39 +0000

We all know how important icons are for a clean and intuitive backoffice
experience in Umbraco. They help content editors quickly identify document
types, elements, and actions, making their lives easier. But manually
importing and managing those icons? That can be a real time-sink.

That's why I'm thrilled to introduce Icoover, a new Umbraco package
designed to automate the process of importing SVG icons into your Umbraco
backoffice. Say goodbye to the days of manually adding icons one by one!

What is Icoover?

Icoover is a simple yet powerful package that automatically imports SVG icons
from a dedicated folder within your Umbraco project. Just drop your SVG files
into the designated directory, restart Umbraco, and boom! Your icons are
ready to be used across your document types and the entire backoffice.

Key Features:

Automatic Import: Icoover automatically detects and imports SVG icons, eliminating manual uploads.
Simple Setup: Just install the package and add your icons to the correct folder. Icoover automatically "hoovers" up SVG files in the App_Plugins/Icoover/icons folder and imports them into Umbraco.

Best Practices for SVG Icons in Umbraco

To ensure your icons render correctly and are fully customizable within the Umbraco backoffice, keep these tips in mind:

Use `viewBox`:

Instead of setting width and height attributes on your root SVG element, use viewBox. This allows Umbraco to handle the sizing of the icon dynamically.

Do:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">

Don't:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">

Use `currentColor`:

For any strokes or fills that should inherit the color from Umbraco's theme, use currentColor.

Do:

<path d="M12 12L12 12" stroke="currentColor" stroke-width="2"/>

Don't:

<path d="M12 12L12 12" stroke="#283a97" stroke-width="2"/>

Icoover is designed to simplify your Umbraco development workflow by automating the icon import process. Give it a try and let me know what you think! I hope this package saves you valuable time and makes your Umbraco projects even better.

Vibe coding a nifty Umbraco tool

Søren Kottal — Sun, 16 Mar 2025 12:50:34 +0000

What started as a slow Friday turned into a productive coding session using Windsurf, Codeiums AI-powered IDE, to create a block thumbnail generator for Umbraco block editors.

TLDR; I made a block thumbnail generator for Umbraco

Thumbnails for blocks in Umbraco is typically examples of what the block renders and they greatly improve the content editing experience. I wanted to try out "vibe coding" on something useful, and this project aims to automate that process, saving time and ensuring consistency across Umbraco projects.

I opened up Windsurf, and gave it the following prompt:

Create a webcomponent (possible with webcomponents inside) that contains an upload field (you should also be able to drop a file into it, or have a button where you can get image data from the clipboard). When uploading an image it should render it into a canvas of 500×300, but crop the image to fit the width. The top part of the image should be visible. If there is remaining vertical space, it should fill with the most prominent color of the outer 1 pixel of the uploaded image.

The initial results were surprisingly accurate. Over the next few hours, I refined the component, adding several key features:

Custom Background Color

I added the option to manually set the background color. While the automatic color detection generally worked well, providing a manual override ensures consistently good-looking thumbnails, especially when the automatically detected color isn't ideal.

Tinting/Colorization

To avoid overly colorful block catalogs, I implemented a tinting feature. This grayscales the uploaded image and then overlays a selected color using the screen blending mode. The screen blending mode was chosen because it creates a subtle color overlay that preserves the image's details while applying the desired tint. This is especially useful for applying a brand color to all thumbnails.

Padding

To easily incorporate screenshots taken directly from design tools like Figma (where layers can be copied), I added padding options. The padding is filled with either the automatically detected background color or the custom-selected background color, ensuring a clean and consistent border around the image.

Fit Options

I expanded the image fitting behavior. Instead of always fitting the uploaded image to the width of the canvas, users can now select whether to fit to the width or the height, providing greater control over the final composition.

Download Options

Finally, I added options for downloading the resulting image in PNG, JPEG, and WebP formats. The filesize of each format is displayed, allowing users to make informed decisions about image quality and file size optimization.

Saving preferences to local storage

It also saves your selected preferences for background color, tint, padding and fit to the local storage in the browser. This way you don't have to set these things for every thumbnail you generate.

Adding polish

The first result was somewhat pretty, but still very prototype like. I wanted to give it an Umbraco feel, so I picked some colors from the Umbraco 12 login background, and fed it into the AI, asking it to recolor the site using them, without any further restrictions.

It then colored everything nicely, including versions for both light and dark mode. I did however had to make it reconsider some of its choices for accessibility and contrast reasons.

Refactoring with Lit and TypeScript

To improve the component's maintainability and prepare it for potential use within an Umbraco package, I had Windsurf convert the web component to use Lit and TypeScript.

This also provided a more structured and type-safe codebase. Although - I haven't really read the code, and this is also one of my painpoints with this kind of technology. You never really feel in control of the output, unless you meticulously read through every change it does.

And just for the sake of it, I had Windsurf turn it into a Progressive Web App, so it can be "installed" for local use. So now I have a thumbnail generator sitting on the taskbar, ready to be used.

Was it worth it

One of the biggest challenges was that Windsurf occasionally reintroduced older bugs or reverted to previous requirements, such as the original image size of 500×300 (which should have been 400×250). These regressions required careful monitoring and reiteration of the correct specifications. These issues occurred approximately 2-3 times during the development process.

All in all, using Windsurf as an "assistant developer" was a surprisingly productive experience. While I could have likely implemented some of the individual features manually in a similar timeframe, Windsurf significantly accelerated the overall development process.

For this type of fun idea, it was definitely worth it. Getting a project from idea to working project was fast. I'm not sure if I would use it on anything non-trivial, that I need to support going forward though. I really don't feel like I know what the code is doing, and while I can read through the code for this project - it was never my intention to do that. But for simple changes and features, I can definitely see the benefits.

Try out the thumbnail generator yourself!

You can try out (and install if you like) the thumbnail generator tool at https://skttl.github.io/umbraco-block-thumbnail-generator/ – it's completely free to use, so go nuts!

Easier Responsive Emails for Umbraco Forms with MJML

Søren Kottal — Thu, 27 Feb 2025 08:45:03 +0000

HTML emails are notoriously difficult to style due to inconsistent rendering across email clients. Fortunately, MJML provides a modern solution that simplifies email creation while ensuring compatibility.

Basically, HTML emails are a Frankenstein’s monster of old web practices, because they have to work in the wild west of email clients. If they were too advanced, half of your audience wouldn't be able to read them properly.

Exhibit A: The default Umbraco Forms Email Template

Here’s an excerpt of the default email template in Umbraco Forms. While functional, it requires extensive inline styling, uses outdated table-based layouts, and lacks flexibility.

    <style type="text/css">

    /* CLIENT-SPECIFIC STYLES */
    body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
    table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
    img { -ms-interpolation-mode: bicubic; }

    /* RESET STYLES */
    img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
    table { border-collapse: collapse !important; }
    body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }

    /* iOS BLUE LINKS */
    a[x-apple-data-detectors] {
        color: inherit !important;
        text-decoration: none !important;
        font-size: inherit !important;
        font-family: inherit !important;
        font-weight: inherit !important;
        line-height: inherit !important;
    }

 /* MOBILE STYLES */
 @@media screen and (max-width:600px){
  h1 {
   font-size: 32px !important;
   line-height: 32px !important;
  }
 }

    /* ANDROID CENTER FIX */
    div[style*="margin: 16px 0;"] { margin: 0 !important; }
    </style>
</head>
<body style="background-color: #f4f4f4; margin: 0 !important; padding: 0 !important;">
    <table border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-bottom: 40px;">
        <!-- LOGO -->
        <tr>
            <td bgcolor="#413659" align="center">
                <!--[if (gte mso 9)|(IE)]>
                    <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
                    <tr>
                    <td align="center" valign="top" width="600">
                <![endif]-->
                <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
                    <tr>
                        <td align="center" valign="top" style="padding: 40px 10px 40px 10px;">
                            <a href="http://umbraco.com" target="_blank">
                                <img alt="Logo" src="@assetUrl/umbraco-logo.png" width="40" height="40" style="display: block; width: 40px; max-width: 40px; min-width: 40px; font-family: 'Lato', Helvetica, Arial, sans-serif; color: #ffffff; font-size: 18px;" border="0">
                            </a>
                        </td>
                    </tr>
                </table>
                <!--[if (gte mso 9)|(IE)]>
                    </td>
                    </tr>
                    </table>
                <![endif]-->
            </td>
        </tr>

Introducing MJML: The simpler approach

Writing HTML email templates like this can be tedious and error-prone. This is where MJML comes in.

MJML (Mailjet Markup Language) is a powerful open-source framework designed to simplify the creation of responsive email templates. Instead of manually coding complex HTML tables and inline styles, MJML offers an intuitive, component-based syntax that automatically generates well-structured and mobile-friendly emails.

Instead of handwriting nested tables, and conditional Internet Explorer comments, you use easy to remember elements like <mj-section>, <mj-column> , <mj-text> and so forth. MJML then converts your markup to real robot-barf-like HTML tables, with all the needed weird quirks to make it work in different email clients.

I won’t go into detail about how to write MJML, you can see that in their documentation. In this article, I want to show you how you can utilize MJML for creating email templates to be used with Umbraco Forms.

First up, I’ve created an MJML implementation of the default example email template provided with Umbraco Forms. Converting it from real robot-barf-like HTML tables to clean MJML, brings it down from 221 lines of code to just 103. And with the added benefit of getting much cleaner markup, that you would be less afraid of touching. You can see the difference here.

But how would you get the MJML converted to HTML before sending the email?

Rendering MJML to HTML in .NET

Since MJML doesn’t have official .NET support, you need a library to convert MJML into standard HTML before sending the email. Fortunately, a community-driven fork of MJML is available on NuGet, implementing all MJML features and actively maintained.

Without having to create your own workflow for Umbraco Forms, to convert the MJML into HTML renderable by email clients, you can use Mjml.Net directly in the razor views used by the default Razor workflow provided with Umbraco Forms.

This would typically require you to save all your markup to a string variable, and run that through the MjmlRenderer, like this:

    var mjmlRenderer = new MjmlRenderer();

    string text = @"
        <mjml>
            <mj-head>
                <mj-title>Hello World Example</mj-title>
            </mj-head>
            <mj-body>
                <mj-section>
                    <mj-column>
                        <mj-text>
                            Hello World!
                        </mj-text>
                    </mj-column>
                </mj-section>
            </mj-body>
        </mjml>";

    var (html, errors) = mjmlRenderer.Render(text, options);

This converts the MJML into fully compatible HTML, which you can then send as an email.

Using MJML in Razor Views

I don’t like putting everything into a variable like this. Especially when I need to loop over form fields, and concatenate values in.

Instead of storing MJML as a string in your code, a cleaner approach is to use Razor views and the layout feature to process MJML dynamically. You can create an MjmlLayout.cshtml file like this:

@using Mjml.Net
@{
    // get the body content as string
    var content = RenderBody();

    // render using mjml.net
    var mjmlRenderer = new MjmlRenderer();
    var (html, errors) = mjmlRenderer.Render(content);

    // print the html
    @Html.Raw(html)
}

Then, in your email template, simply reference the layout:

@{
    Layout = "MjmlLayout.cshtml";
}

This way, the email template content is processed through the MJML renderer dynamically, allowing you to use Razor’s built-in functionality while leveraging MJML’s cleaner syntax.

Conclusion

By integrating MJML with Umbraco Forms, you achieve cleaner, more maintainable email templates while ensuring broad compatibility across email clients. This approach allows developers to focus on design and content rather than battling email client inconsistencies, ultimately simplifying the email creation process.

Make your layouts dynamic with Quantity Queries in Tailwind CSS

Søren Kottal — Tue, 18 Feb 2025 07:33:06 +0000

CSS has come a long way, giving us all sorts of cool ways to handle layouts. One neat trick that’s often overlooked is quantity queries. These let you style elements based on how many of them exist inside a container. That means you can create more flexible designs without relying on JavaScript or other external programming languages.

What Are Quantity Queries?

Quantity queries are basically CSS selectors that let you style things based on how many child elements a parent has. While CSS doesn’t have a built-in feature for this, you can get creative using the :has selector with :nth-child() and :nth-last-child() to make it work.

For example, you can style a container differently depending on how many items it holds. This is super handy for building adaptable grid layouts, menus, lists, and more.

Example 1: Changing Styles Based on the Number of Items

.container:has(:nth-child(3)) {
  background-color: lightblue;
}

Here, if a .container has at least three children, it gets a light blue background.

Example 2: Adjusting a Grid Layout Automatically

.container:has(:nth-child(5)) {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.container:has(:nth-child(3)):not(:has(:nth-child(5))) {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

This setup makes a container use a 5-column grid if it has exactly 5 children. If it only has 3 (but not 5), it switches to a 3-column layout instead.

Why This Is Awesome

Quantity queries let you tweak styles without needing media queries or JavaScript. Elements adjust their look based on how many siblings they have, making things more flexible.

Quantity Queries with TailwindCSS

If you're a Tailwind CSS user, you can use the tailwindcss-quantity-queries plugin to integrate quantity queries into your workflow. This plugin allows you to apply Tailwind utility classes based on the number of child elements, making it easy to create dynamic, responsive designs without writing custom CSS. For example:

<div class="children-[>3]:bg-blue-500 children-[5]:grid-cols-5">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

With this setup, the parent div gets a blue background if it has three children and switches to a 5-column grid if it has five children. This plugin is a great way to make your Tailwind projects even more flexible and powerful.

You can also use the plugin in combination with the group utility to style the children, based on a groups number of children. For example:

<div class="group">
  <div class="group-children-[<3]:bg-red-500">Child 1</div>
  <div class="group-children-[>5]:bg-blue-500">Child 2</div>
  <div class="group-children-[2-5]:bg-green-500">Child 3</div>
</div>

The plugin is compatible with both the new v4 of Tailwind, and the old v3. You simply drop in the plugin in your config, eg. in the new css style config:

@plugin "tailwindcss-quantity-queries"

or in the old javascript format:

module.exports = {
  plugins: [
    require('tailwindcss-quantity-queries')
  ],
};

Wrapping Up

Quantity queries in CSS give you new ways to create flexible and responsive designs.

Give it a shot and see how it changes your workflow!

Enhancing 404 Pages with Search in Umbraco

Søren Kottal — Mon, 10 Feb 2025 19:39:48 +0000

A well-designed 404 page enhances user experience when a requested page doesn’t exist. There are tons of examples of fun and creative error pages if you want to lighten up your user's mood. But you can also try to be helpful for users who just want to find the content they’re looking for.

404 errors can have many causes.

One common cause is a page being moved to a new URL. Luckily, Umbraco handles this automatically for us, creating the necessary redirects from the old url to the new one.

But they can also come from mistyped urls, or simply the user guessing the location of a page. This is where this idea comes in handy.

If you combine your error page, with search results based on the current context - in this example, the requested URL - the user might get lucky, and get pointed towards the content they were actually looking for.

Demo Time

To demonstrate for you, I've created a new site based on the infamous Umbraco Starter Kit, containing some demo content ready to get going.

Umbraco comes with Examine out of the box for searching the site content. And while that is often enough for most users, I can't resist using this opportunity to create some awareness for my package Full Text Search.

This package renders every page, and indexes all text content into Examine, including content referred from other pages or simply hardcoded into your templates. The result is a Google like index, where you can search for each and every word, the user sees on each page. It also makes more complex pages, like pages built with blocks in either Block List or Block Grid easier to search.

And it offers an easy API for creating the search, handling things like multi relevance, boosting, summarizing etc. for you without breaking a sweat.

Creating the 404 page

I created a document type to contain the page itself. To integrate with the starter kit, I added the existing Navigation Base composition. This is a composition content type found in the starter kit, that I use just to get the necessary properties needed to hide the page from the navigation. You can do what you need in your own project.

I also create a page in the Content Tree, for the 404 page, and to make it work as the actual 404 page, I add the necessary setup in my appsettings.json file.

{
  "Umbraco": {
    "CMS": {
      "Content": {
        "Error404Collection": [
          {
            "Culture": "en-US",
            "ContentKey": "4b7b8f17-9a64-4165-b753-9584ca36bc52"
          }
        ]
      }
    }
  }
}

Note, I don't think this way of adding 404 pages is very editor friendly. What if the editor deletes it and creates it over, then you have to change config of your site. Or what if you have multiple sites sharing the same language, then you can't configure 404 pages like this. I have a better way, which I might show in another blogpost.

Adding search results to 404 page

Instead of just showing an error, let’s make our 404 page actually useful — by adding smart search results!

In the template for the 404 page, I reused some HTML from existing templates to maintain consistency and reduce effort.. But instead of the content, I create a search result using Full Text Search.

To do this, I first need to inject in the Full Text Search helper using

@inject Our.Umbraco.FullTextSearch.Helpers.FullTextSearchHelper FullTextSearchHelper

and I can then go and create the search result using the helper.

To generate the search query, I extract the requested path and replace non-alphanumeric characters with spaces. For example, /this/path/does/not/exist becomes this path does not exist. I could also have looked at the referrer, or other data.

The search process is straightforward - simply passing the query to Full Text Search handles the rest. But there is several extra options, if you wish to configure it yourself.

If the search then returns any results, they get shown, leading the user to other related pages.

<section class="section">

    <div class="container">
        <div>
            <p>The page you were looking for, could not be found!</p>
            @{
                // generate search query from request path
                var query = Context.Request.Path.ToString().ReplaceNonAlphanumericChars(" ");

                // search for the generated query
                var search = FullTextSearchHelper.Search(query, Model.GetCultureFromDomains(), 1);

                @if (search.TotalResults > 0)
                {
                    <p>Maybe these pages can help you?</p>

                    <div class="blogposts">
                        @foreach (var result in search.Results)
                        {
                            <a href="@result.Content.Url()" class="blogpost">
                                <h3 class="blogpost-title">@result.Title</h3>
                                <div class="blogpost-excerpt">@result.Summary</div>
                            </a>
                        }
                    </div>
                }
            }
        </div>
    </div>

</section>

Conclusion

Now, if a user visits non-existing URLs like /produits, /products/unikorn, /blog/another, or /jan-skovgaard, they are guided toward relevant pages instead of encountering a dead end.

You can try this yourself! The source code, including uSync files, is available on GitHub for easy download and experimentation.

Learnings from upgrading an existing Umbraco project to TailwindCSS 4

Søren Kottal — Fri, 24 Jan 2025 09:53:09 +0000

As a developer relying on TailwindCSS for crafting responsive designs effortlessly, the release of TailwindCSS v4 was an exciting occurrence. I jumped immediately into the project I’m currently working on, and started upgrading to the latest Tailwind version.

We use a somewhat simple approach to TailwindCSS in our Umbraco (ASP.net MVC) projects. In the website project, we initalize an npm package with npm init and then install TailwindCSS and necessary scripts for building. The source files is placed in ./UI/CSS/main.css and the config in ./UI/CSS/tailwind.config.js

Moving config to CSS, spacing changed

One of the big headlines of the new Tailwind version, is the addition of config in CSS. With that, all configurable values are now defined as custom properties, which adds some exciting new possibilities.

I like to stay as close to the default config as possible, so moving this over to CSS was not a big hurdle.

Though, I used to generate spacing values using an npm package I built, generate-tailwind-scale, I opted to leave this one behind, as the new spacing scale is dynamic.

I did use the same package for defining font-sizes though, but for this project, most of the font-sizes used already matched the default font-sizes. And the rest I simply changed into using arbitrary values, eg. text-[10px]

Automatic content scanning

In TailwindCSS v3, developers had to manually specify content paths to ensure Tailwind scanned the correct files for class usage. TailwindCSS v4 automates this process, scanning the entire directory it's executed from (except files specified in .gitignore). This clever tweak reduces configuration overhead.

Initially, I was worried that my output.css file would be considered for class generation since we don’t git-ignore it in our projects. If it were considered, removing a class would be impossible. Fortunately, it's not included, and when I added a one-time class like m-[1337ch], it appeared in the output but was promptly removed when unused elsewhere.

For content files ignored by .gitignore or located outside the project path, developers can specify paths via @source "../path/to/something", offering flexibility for more complex directory structures.

No more content transforms (for now?)

One missing feature in this content definition method is the ability to transform content during scanning. Previously, I configured content to allow writing @@container to add the @container class used by the container query plugin (now built into Tailwind!). Since my frontend is written in Razor/cshtml, @container would cause errors, while @@ worked as an escape character. For now, I have to wrap those like @("@container").

UTF-8 BOM encoding issue when working from Visual Studio

A notable challenge during the upgrade was related to file encoding. If your main Tailwind input file (main.css) was created using Visual Studio, it might be saved in UTF-8 BOM format. TailwindCSS v4 cannot correctly process UTF-8 BOM, causing incorrect or incomplete outputs.

This issue initially puzzled me, as the output.css file still contained Tailwind-specific directives like @utility and @import "tailwindcss".

The simple solution is to save your CSS file as UTF-8 without BOM. Once converted, TailwindCSS functions as expected.

Safelisting classes is deprecated

In a significant change, TailwindCSS v4 no longer supports class safelisting. For simple classes, I recommend documenting them in comments within your CSS files. I previously used regex for safelisted classes but had to refactor. Instead of using direct dynamic class definitions like class="bg-@Model.Color", I transitioned to custom properties: class="bg-(--my-bg)" style="--my-bg: var(--color-@Model.Color)". This approach also results in a cleaner, more maintainable solution, and fewer bg- and color- classes.

New method for custom utilities and variants

Another significant change is the method for defining custom utilities. The reliance on @layer utilities blocks is gone. Instead, in TailwindCSS v4, you can define them using a new directive: @utility. For example, to create a utility to hide scrollbars:

@utility scrollbar-hidden {
   /* css here */
}

For variants it has become very simple, heres an example of a custom variant I had in this project:

@custom-variant mouse-only (@media screen and (pointer: fine));

Simpler plugin setup

TailwindCSS v4 introduces a more streamlined way to incorporate plugins. Plugins are now embedded directly using directives such as @plugin "@tailwindcss/typography". This approach simplifies the integration process, reducing boilerplate code and setup time.

And it seems like v3 plugins are supported out of the box. At least my quantity query plugin just works.

JavaScript config still possible

While TailwindCSS v4 still supports JavaScript configuration files, the authors advises against using them. I think they will end up completely deprecated at some time, but at least not before an eventual v5 or v6 of TailwindCSS.

Conclusion

Updating to TailwindCSS v4 was quite straight forward. If not for the BOM encoding issue, I would say it was as easy as pie.

Next, I think I need to link into using the standalone CLI in the build pipeline, or maybe even when starting the website, to make our projects even simpler to work with.

Bonus tip

Working with TailwindCSS is a lot better, with the right tools. For VSCode, Tailwind Labs has their own intellisense extension.

For full Visual Studio, an unofficial extension offers similar functionality. Although it's not supporting v4 yet, the author is trying to make it happen in the next few weeks.

DEV Community: Søren Kottal

Customizing Umbraco ModelsBuilder Output

The Problem

The Solution

How It Works

1. Inheriting from ModelsGenerator

2. Post-Processing Generated Files

3. Adding Property Alias Constants

Registering the Custom Generator

Using the Generated Constants

Final Thoughts

Enhanced Event Logs and Deployment Monitoring for Kudu in Umbraco Cloud

Visualizing Event Logs

How to use it

Tracking Deployments

How to use it

Final Thoughts

Make Umbraco’s Welcome Dashboard Your Own

Extending the Welcome dashboard

A (slightly useless) example implementation

A practical use case

Final thoughts

Readable, simple Chinese URL segments in Umbraco with NPinyin

Converting Chinese characters to Latin using pinyin

Using a custom URL segment provider in Umbraco

Example implementation

Results

Say Hello to uMux: Sync videos from Umbraco to Mux effortlessly

Why uMux?

What does it do?

Why use a third party video host?

Getting started

Umbraco Marketplace Package Sync Bookmarklet

How to Use

Say Goodbye to Tedious Icon Imports in Umbraco with Icoover!

What is Icoover?

Key Features:

Best Practices for SVG Icons in Umbraco

Use viewBox:

Use currentColor:

Vibe coding a nifty Umbraco tool

Adding polish

Refactoring with Lit and TypeScript

Was it worth it

Try out the thumbnail generator yourself!

Easier Responsive Emails for Umbraco Forms with MJML

Exhibit A: The default Umbraco Forms Email Template

Introducing MJML: The simpler approach

Rendering MJML to HTML in .NET

Using MJML in Razor Views

Conclusion

Make your layouts dynamic with Quantity Queries in Tailwind CSS

What Are Quantity Queries?

Example 1: Changing Styles Based on the Number of Items

Example 2: Adjusting a Grid Layout Automatically

Why This Is Awesome

Quantity Queries with TailwindCSS

Wrapping Up

Enhancing 404 Pages with Search in Umbraco

Demo Time

Creating the 404 page

Adding search results to 404 page

Conclusion

Learnings from upgrading an existing Umbraco project to TailwindCSS 4

Moving config to CSS, spacing changed

Automatic content scanning

No more content transforms (for now?)

UTF-8 BOM encoding issue when working from Visual Studio

Safelisting classes is deprecated

New method for custom utilities and variants

Simpler plugin setup

JavaScript config still possible

Conclusion

Bonus tip

Use `viewBox`:

Use `currentColor`: