Sharepoint - How to use html code in modern UI

There is a React Script Editor webpart that can enable this type of functionality: https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-script-editor

However, if it is just some simple HTML/JS then a no framework SharePoint Framework webpart would be pretty simple to create. There is a learning curve (especially with toolsets), but following the hello world tutorial will get you there pretty quick: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part


@theChrisKent is correct.
This is the very big trade off for many SharePoint admins & devs when considering whether or not to utilize modern pages in SharePoint. I just completed an on-prem to online migration and it was the very first thing I had to decide. We opted for a migration as opposed to an “upgrade”, thereby staying in the classic UI.

The trade off is that oob you get responsive layout, a ‘future-proof’ layout (as Microsoft puts it: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/migrate-script-editor-web-part-customizations ) and really easy integration with PowerBI and other o365 apps. The downside is a steep learning curve as @theChrisKent lays out.

My answer to your question is that you need to create a ‘modern’ webpart using a JS Framework, gulp, npm, node.js, and yeoman.

The tooling required for what you want to do - and how to use it - is going to require many SharePoint Admins to become developers whenever Microsoft deprecates the ‘classic’ UI because all of these custom webparts require knowledge of the above mentioned tools in addition to a need for a version control system.

It was not easy for me to make the transition, (some sites in my migration project wanted the new UI) but it can be done.

Tags:

Html5