uSkinned Site Builder for Umbraco 17 🤩

The next generation of uSkinned Site Builder (version 7.0.0) is here, bringing full support for Umbraco 17 alongside a completely modernised backoffice experience, improved editor tools, Block Grid support, dark mode compatibility, and more.

This is one of the biggest upgrades we’ve undertaken since launching Site Builder back in 2021. Moving from Umbraco 13 to 17 was far more than a version upgrade. With major architectural changes across the CMS, the move away from AngularJS, and a completely modernised backoffice experience, almost every part of Site Builder had to evolve alongside it.

Over the past few months, we’ve shared parts of that journey with the community, including at the recent Umbraco Scotland Meetup in Glasgow, where our co-founder Marc Love spoke about the migration process, the challenges involved, and what it takes to upgrade a deeply integrated product to Umbraco 17.

Now, with Umbraco 17.4 delivering the stability we’ve been waiting for across key extension points, we’re ready to release the first version of Site Builder 7 for Self-Hosted websites.

A Modern Umbraco Backoffice

One of the biggest changes in Umbraco 17 is the removal of AngularJS in favour of a modern TypeScript-based extension architecture.

For Site Builder, that meant rebuilding and rethinking large parts of the backoffice experience, including custom property editors, dashboards, collection views, sections, and editor tools. With over 20 custom property editors and more than 100 custom data types to migrate, this was a significant undertaking.

The result is a faster, cleaner, more future-proof editing experience that feels right at home in the latest version of Umbraco.

What's New?

Alongside full Umbraco 17 support, this release also introduces many new improvements and refinements across the platform.

uSkinned Page Editor

Our Visual Editor has evolved into the new uSkinned Page Editor.

Fully rebuilt for Umbraco 17, the Page Editor continues to provide an intuitive visual editing experience directly within the backoffice and can be enabled or disabled at any time depending on your project needs.

uSkinned Theme Designer

The Visual Designer is now the uSkinned Theme Designer.

The Theme Designer is still accessed directly within preview mode, providing a smoother workflow when customising the look and feel of your site. 

Or, work with the Theme Designer directly in the backoffice.

Fully Dark Mode Ready

uSkinned Site Builder is now fully compatible with Umbraco’s dark mode experience, ensuring a more polished and consistent editing environment across the entire CMS.

New Multi-URL Picker

We’ve introduced a brand-new multi-URL picker, making it easier to manage and reuse multiple links throughout your content.

New Header App

A new header app now provides quick access to Site Builder version details alongside a direct link to the content dashboard.

Templates Are Now Blueprints

Following changes introduced by Umbraco, the Templates section has now been renamed to Blueprints. Create blueprints to streamline the editor experience.

Block Grid Support

With the Umbraco Grid now deprecated, we’ve introduced a brand-new component that utilises the Umbraco Block Grid.

This allows editors to add any uSkinned Pod (or custom Pod) into any Block Grid layout option, opening up even more flexibility when building page layouts and modular content experiences.

Importantly, existing Grid content from Umbraco 13 websites is not lost during the upgrade process. Existing content will continue to work, giving teams the flexibility to migrate layouts and components to Block Grid over time rather than needing to rebuild everything immediately.

Performance Improvements and Fixes

As part of the migration process, we’ve also delivered a large number of smaller improvements, fixes, and performance enhancements throughout Site Builder.

What’s Next?

Getting onto Umbraco 17 was the priority.

Now that we’re here, we can get back to doing what we love most: building new features, refining the editing experience, and delivering many of the improvements and requests we’ve had from our community over the past year.

There’s a lot more to come in the weeks and months ahead. Watch this space.

How to Access 7.0.0

Upgrading to 7.0.0

Are you fed up with reading and want to try it out? No problem, follow this guide on how to install the upgrade.

Install 7.0.0 on a New Site

Starting from scratch? Great, here's the code snippet to get started. Copy and paste this into the command line, and you're good to go.

Choose the database option that best suits you...

Option A — Local Database

# Ensure we have the latest Umbraco templates
dotnet new install Umbraco.Templates@17.4.0 --force

# Create solution/project
dotnet new sln --name MyLocalDatabaseSolution
dotnet new umbraco -n MyLocalDatabaseProject --friendly-name "Admin User" --email "admin@admin.com" --password "1234567890" --development-database-type LocalDB
dotnet sln add MyLocalDatabaseProject
dotnet add MyLocalDatabaseProject package uSkinnedSiteBuilder

# Run
dotnet run --project MyLocalDatabaseProject
# Running

Option B — SQLite

# Ensure we have the latest Umbraco templates
dotnet new install Umbraco.Templates@17.4.0 --force

# Create solution/project
dotnet new sln --name MySQLiteSolution
dotnet new umbraco -n MySQLiteProject --friendly-name "Administrator" --email "admin@admin.com" --password "1234567890" --development-database-type SQLite
dotnet sln add MySQLiteProject
dotnet add MySQLiteProject package uSkinnedSiteBuilder

# Run 
dotnet run --project MySQLiteProject 
#Running

#h5yr