Is it possible to customize the HTML from a Sharepoint Modern Experience page?

Question

I know that you can customize the HTML/CSS of a Sharepoint Classic page.

But is it also possible to do this with Sharepoint Modern Experience page?

If so how?

Answer 1

It is not possible using SharePoint out of the box web parts.

However, you can do DOM manipulations using SharePoint framework (SPFx).

1. For single modern page:

If you want to customize particular modern page, you can use modern script editor web part.

Example:

You can use custom CSS like below on the Modern page to hide page title and command bar.

Try using below CSS:

<style>
    div.commandBarWrapper {
        display: none !important;
    }
</style>

To add this code you will need a script editor web part. Below is the Modern Script Editor web-part created using SPFx:

Modern Script Editor web-part.

Source: Hide Page Title and Command bar from Modern UI SharePoint pages

2. For all modern pages:

If you want to customize all modern pages in site, you can create an SPFx application customizer to inject the custom CSS/JS to achieve it.

References:

1. SPFx Applications Customiser CSS Injection
2. How can I include the same JS and CSS files on multiple SharePoint Modern Page?

---

Note: DOM manipulation & CSS customizations are not recommended by Microsoft and some of your customization may break if Microsoft changes HTML element id/classes in new release updates.