It's great to see a useful feature being added to levelbuilder, and more such improvements are most welcome.

Here are some initial notes on what would bring this up to production quality:

• We shouldn't do JS or CSS directly in HAML any more. When these are inside HAML, we lose the linting and browser-independence of our apps build pipeline. Check out Create React UI for editing validations in levelbuilder #53142 for an example of how to build a levelbuilder component using our apps pipeline.
• Unless there is a special case, it's best to programmatically render HTML using React. The above-mentioned PR is a good example of that, as well. React gives us more browser-independence, a more robust rendering model, and is consistent with the rest of our site.
• There should be no need to render this UI as position: fixed, and indeed it has some artifacts such as overlapping the rest of the page content at certain browser widths. Instead, it should just be a div on the left side of the page, with the remaining content in a div to its right.
• More an aesthetic choice, but the list might not need to show bullets for each item. We have some other examples on the site, such as at https://code.org/about.

Thanks for these comments @breville ! It's cool to see an example of this done using React. I appreciate the guidance about best practices and I wonder if there is documentation about the direction the team is going when it comes to levelbuilder. I haven't seen any and it would be helpful to inform this and future work on this tool.

I appreciate the guidance about best practices and I wonder if there is documentation about the direction the team is going when it comes to levelbuilder. I haven't seen any and it would be helpful to inform this and future work on this tool.

Good question. I think the @code-dot-org/teacher-tools team might know more.

I appreciate the guidance about best practices and I wonder if there is documentation about the direction the team is going when it comes to levelbuilder. I haven't seen any and it would be helpful to inform this and future work on this tool.

Good question. I think the @code-dot-org/teacher-tools team might know more.

I agree with the best practices that Brendan mentioned above. Unfortunately levelbuilder is a place where we have lots of code violating these best practices, so it is often a judgment call on whether to follow the existing pattern vs try to improve it. That said, any time you find yourself adding a new command like :javascript or :css to a haml file, that's a sign that you probably should be creating a new file instead. (adding a couple of lines to a big existing block of js-in-haml could sometimes be ok).

regarding building the html via document.createElement, I would say that we do not have many examples of that in the codebase and pretty much always want to use React (or in some cases haml) to generate the html.

For levelbuilder changes where you are not sure how to proceed, feel free to reach out at the outset.