How to use html code in modern UI

Question

This may be a rookie question but I just entered the world of SharePoint after a long time. I used to use the content editor web part to include custom html into my SharePoint pages, but now on the modern UI I can't find an equivalent. My code would be a one time only use (just some simple html to create a responsive infographic, front end friendly :) )

Answer 1

@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.

Answer 2

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