Editing source code in the Rich Content Editor

  • Release version: Zurich
  • Updated July 31, 2025
  • 2 minutes to read
    • Summarize
    Summarized using AI
    This content was generated using new OpenAI-powered functionality. Results are provided on an as is basis and are not guaranteed to be accurate or complete.

    Summary of Editing source code in the Rich Content Editor

    The Rich Content Editor in ServiceNow allows you to modify HTML and CSS source code directly for all elements in the canvas or specific elements. This capability enables you to build layouts with HTML, apply custom CSS styles beyond the canvas interface options, or migrate content by copy-pasting code from other sources.

    Show full answer Show less

    Key Features

    • Portal Security: When applying changes, the editor sanitizes HTML by removing tags that might compromise your instance, ensuring security compliance.
    • Code Identification: CSS fragments critical to the portal theme or shared by multiple elements are highlighted in red to prevent accidental deletion.
    • CSS Rule Protection and Removal: If you delete CSS rules linked to essential HTML elements (such as Row, Cell, Canvas, Divider, Button, Link block, or Tabs), the editor automatically reinstates them. To override this, you can highlight the CSS block and use the Remove CSS button to permanently remove the code.
    • Unused Code Cleanup: Upon saving, the editor removes unused CSS rules to maintain clean code.

    Important Considerations for ServiceNow Customers

    • Custom HTML and CSS changes can break your portal design; proceed with caution and test thoroughly.
    • The editor does not reliably track changes, so the Undo function may not revert code edits effectively.
    • Avoid defining CSS rules using generic HTML elements (e.g., div or p) because styles may unintentionally apply globally across the portal, affecting multiple components like text boxes and footers.
    • Copy-paste behavior can vary by browser:
      • If Ctrl+V does not duplicate content as expected, use the duplicate icon in the component toolbar.
      • If pasted content loses styling, clear existing styles and reapply them manually.
      • Some script tags may be removed by the HTML sanitizer, causing content to appear differently after saving.
    • This feature requires administrative enablement via the Edit code property.

    Modify the HTML and CSS source code for all the elements in the canvas or for a specific element.

    Build the layout using HTML elements, directly edit the CSS for an element to add styling that isn't otherwise available in the canvas interface, or copy-paste code to migrate content from other sources.Add a border around a row and customize the header font

    Features and capabilities

    Ensure portal security
    When you click Apply in the Edit code window, the code editor removes HTML tags that could be used to compromise your instance. For more information, see HTML sanitizer.
    Identify important code
    The editing window highlights CSS fragments in red if they should not be deleted. This indicates either a setting that is part of the portal theme or that multiple elements use that code.
    Additionally, if you delete a CSS rule that is referenced by one of the following HTML elements, the code editor reinstates the CSS rule:
    • Row
    • Cell
    • Canvas
    • Divider
    • Button
    • Link block
    • Tabs
    Remove unnecessary code
    When you save your changes, the code editor removes any unused CSS rules.
    Conversely, if the code editor reinstates a CSS rule that you are trying to remove, highlight that block of CSS code and click the Remove CSS button to override the code editor.
    Figure 1. Example of using the Remove CSS button

    In the following video, the user tries to delete a CSS rule using the delete key, but the system reinstates the code. Next the user highlights the code and clicks Remove CSS, which successfully removes the code.

    User unsuccessfully tries to delete a CSS rule using the delete key, so they use the Remove CSS button, which removes the highlighted code
    Note:
    This feature is not available by default. An Admin must enable the Edit code property. See Properties installed with Content Publishing

    Important considerations

    • Adding custom HTML and CSS can break your design. Proceed with caution when using this feature. The Rich Content Editor does not track changes in the code editor, so the Undo button will not reliably revert the code changes.
    • We do not recommend using HTML elements (such as div or p) to define CSS rules, as that can have unintended consequences.
      Figure 2. Example of an unexpected outcome when using HTML element to define CSS rule

      In the following example, the user defines a CSS rule for the p element in a cell. However, in the page preview, the style rules apply to the p elements in all the text boxes, as well as in the footer.

      User defines a CSS rule using the HTML p element for a cell but the rule is applied throughout the page
    • Different browsers may exhibit varying copy/paste behaviours. If pressing Ctrl+V does not duplicate the content as expected, click the duplicate icon in the component toolbar.
    • If copy-pasted content does not retain its styling (such as font), and adjusting the settings does not help, clear the styling by clicking the “x" next to the styling field, then set the styling.Remove the custom styling by clicking the "x" next to the styling field
    • If pasted content appears differently saving, it likely due to some script tags being removed by the HTML sanitizer.