When I was working on a document management system for one of my clients, they had a particular request: they wanted to add their own custom HTML, CSS, and even a bit of JavaScript to their SharePoint Modern Page. Out of the box, SharePoint doesn’t give you a direct way to drop in custom code, so I had to explore different approaches.
After some research, I found two practical solutions:
- Use the Embed web part to display the .aspx page with your custom HTML/CSS inside the modern page.
- Use a link to open the custom SharePoint page in a separate window.
In this tutorial, I will show you how to add custom HTML and CSS to a SharePoint Modern Page.
Add Custom HTML/CSS to a SharePoint Modern Page
Before we try these methods, we need to make sure custom scripting is enabled in our SharePoint Site. By default, Microsoft disables custom scripts for security reasons; therefore, we’ll need to allow them from the SharePoint Admin Center.
Follow the steps below to enable custom scripting:
- In the SharePoint Admin Center, select the site where you want to allow custom scripting. Go to Settings. Under Custom Script, click Edit.
- Allow custom script as required and save the changes.
Note:
When the Custom Script setting is switched to Allowed in SharePoint Online, it only stays that way for about 24 hours before Microsoft’s policy resets it back to Blocked.
However, if you’ve already added custom scripts (for example, Script Editor web part or embedded code) during that window, the script will continue to work even after the setting switches back to Blocked.
Once enabled, we’ll be able to upload .aspx files and embed them in our modern pages.
Steps to Add Custom HTML/CSS in SharePoint Document Library
Now, let’s create a simple example of a live digital clock widget.
- Save the following code as an .html file (in any code editor, such as Visual Studio), then rename it to .aspx.
<style>
body {
font-family: Arial, sans-serif;
background: #f3f3f3;
text-align: center;
padding: 40px;
}
.clock {
background: #000;
color: #0f0;
font-size: 40px;
font-family: monospace;
padding: 20px;
border-radius: 8px;
display: inline-block;
}
</style>
</head>
<body>
<h2 style="color:#0078d7;">Live Digital Clock</h2>
<div class="clock" id="clock">00:00:00</div>
<script>
function updateClock() {
const now = new Date();
document.getElementById("clock").innerText =
now.toLocaleTimeString();
}
setInterval(updateClock, 1000);
updateClock();
</script>
- Upload the .aspx file into your SharePoint document library.
Method 1: Embed the Custom Page in a Modern Page
Once we upload the .aspx file into your SharePoint Document Library, we can embed it inside a Modern Page using the Embed web part.
Follow the steps:
- Go to your SharePoint Modern Page and click Edit. Select the + icon to add a new web part. Choose the Embed web part. Paste the link to your uploaded .aspx file in the embed code field.
- Save and publish the page.
https://<tenant>.sharepoint.com/sites/PowerBI/<LibraryName>/SharePoint.aspx
Now, your custom HTML/CSS widget (e.g., the live digital clock) will appear directly on the page.
Method 2: Add the Custom Page to SharePoint Left Navigation
If you prefer to keep the custom page separate and easily accessible, you can add it to the SharePoint site’s left-hand navigation.
Follow the steps below:
- Go to your SharePoint site. On the left-hand side, click Edit under the navigation panel.
- Select + Link. Provide a name (e.g., “Custom Clock”) and paste the URL of your .aspx file stored in the document library.
- Click OK and then Save.
Now, our custom HTML page will appear as a navigation link, and users can open it in a separate window.
This way, you can add custom HTML, CSS, or JavaScript to a SharePoint Modern Page by enabling custom scripts and either embedding an .aspx page or linking it through the site navigation.
Also, you may like the following tutorials:
- Delete SharePoint Site
- Get SharePoint Online Site ID
- Share SharePoint Site with External Users
- Create a Custom Site Template In SharePoint Online
Hey! I’m Bijay Kumar, founder of SPGuides.com and a Microsoft Business Applications MVP (Power Automate, Power Apps). I launched this site in 2020 because I truly enjoy working with SharePoint, Power Platform, and SharePoint Framework (SPFx), and wanted to share that passion through step-by-step tutorials, guides, and training videos. My mission is to help you learn these technologies so you can utilize SharePoint, enhance productivity, and potentially build business solutions along the way.
