Super 3.1 – Changes & Code update guide

Technology Upgrade

In the 3.1 release Super sites are getting a significant update. This update is mostly related to the technology on which Super sites runs, and provides huge site performance enhancements. It also allows us to start implementing new features which were previously not possible. It also sets up the Super platform for a robust future.

This brings huge performance boosts by significantly reducing the amount of HTML required to render a page - we’ve cut the number of elements on a typical page by over 30%. We did this by rebuilding many of the sites components in a smarter way and reducing nested elements. This also improves SEO since search engines favor sites that load faster. One implication of this update is the simplification of some of the Super page structures which can have an impact to your sites custom code.

Check and update your Custom Code

For most sites there will be no impact from these changes. For some sites using custom code, there may be some impact. We don’t do this kind of update often because it can break custom code.

On the sites we’ve tested, most custom code works fine, and any changes that are required to be compatible with this update are very minimal.

However, some sites use custom code that relies on a specific DOM structure, so we are rolling the update out slowly to give everyone time to update their custom code if needed.

How to check your code

After the update is initially deployed, the Super dashboard preview in the Beta will show your site with the updated HTML structure, but your live site will continue to render the old HTML until you commit to the upgrade by pressing the upgrade button, or the beta/transition period elapses.

1. View your site in the Super Dashboard Beta - during the initial beta period use beta.super.so instead of app.super.so
2. You will see an upgrade button on the dashboard - this means your live site is still running the old version of Super and the Preview panel in the Dashboard is running the new version.
⚠️

Upgrading your site is a one way process and cannot be undone.

Don’t press the ‘Update now’ button until you are happy that your code is updated and working in the Preview Panel.

3. Backup your custom code - ensure that you make your own backups of your custom code before you make any changes - select all the code, copy it, and paste it into a Notion page somewhere in your Notion account making note of where the code came from - global/which page etc.
4. Check your custom code - using the guide below, check for code references that may have changed and validate that the changes you make are fixing any incompatibilities. You can use your live site as a reference during the beta and transition periods until you press the Upgrade button.
💡
In the Super code editor, pressing cmd-f or ctrl-f will open up a search box, that will allow you to search through the code.

Your live site will still be referencing the same custom code base as the new version, so any changes to the CSS will need to also support your current live site. You can manage this by maintaining the original CSS references in the code, and adding the new references to the code.

so if you had the following code:

Copy

.super-content-wrapper .super-content {
  color: red !important;
}

Then add the new reference rather than replacing it:

Copy

.super-content-wrapper .super-content, .super-content { /* 3.1 */
  color: red !important;
}

This will maintain backward compatibility for your live site while the transition happens. Using a comment on the updated line will help you manage the changes without re-work.

5. Upgrade your site once you are happy with the changes - if you are using more general CSS code, then chances are you won't have needed to make any changes. Pressing the upgrade button will initiate the upgrade process for your site. Upgrades will be done in batches at least once every 24 hours.

Getting help with this transition

While your custom code is your responsibility, we can support you with this change to help you identify any small fixes to help with the transition - reach out to support in the Chat bubble in the bottom right of the Dashboard, and we’ll help you work through the process.

Code changes breakdown

Here is a breakdown of the specific changes in the HTML code, including class names, and before-and-after comparisons.

Global layout changes

Notion Page

Heading

<h1 id="block-c7b47dc318c04b40a780d10f35694526" class="notion-heading">
	<span class="notion-heading__anchor" id="c7b47dc318c04b40a780d10f35694526"></span>
		<span class="notion-semantic-string">
			<span>Hello World</span>
		</span>
</h1>

<h1 id="block-c7b47dc318c04b40a780d10f35694526" class="notion-heading notion-semantic-string">
	Hello World
</h1>

Text

Text block

<div id="block-b6997ba92b274084ae2a07fb5db63909" class="notion-text">
	<p class="notion-text__content">
		<span class="notion-semantic-string">
			<span>Hello World</span>
		</span>
	</p>
</div>

<p id="block-b6997ba92b274084ae2a07fb5db63909" class="notion-text notion-text__content notion-semantic-string">
	Hello World
</p>

Text link

<p id="block-699ee84ecbe14a2c96a6b8feb2166a7c" class="notion-text notion-text__content notion-semantic-string">
	<a class="notion-link link" href="https://super.so">
		Super
	</a>
</p>

Databases: Gallery cards

Navbar

Footer

Error Page

General