Ampscript Editor in Cloud Pages

A single-file AMPscript and SSJS playground that runs inside a Salesforce Marketing Cloud (SFMC) CloudPage. Type code in the browser, click Run, and see the rendered output on the same page.

How it works

AmpscriptEditor.html has three parts:

1. Editor. An Ace editor loaded from cdnjs (JavaScript mode, syntax checking turned off). jQuery is loaded from code.jquery.com.
2. Submit. On every change, the editor text is copied into a hidden scriptText field with < and > escaped as < and >. Run posts the form back to the same page (RequestParameter('PAGEURL')).
3. Render. Server-side SSJS reads the field with Request.GetFormField("scriptText"), turns newlines into spaces, unescapes </>, and passes the text to Platform.Function.TreatAsContent(). The result and the original code are stored in the AMPscript variables @renderedResult and @scriptText. Browser JavaScript then puts the code back in the editor and inserts the result into the Result panel as HTML.

Because TreatAsContent evaluates the whole string as content, both AMPscript (%%[ ... ]%%, %%= ... =%%) and SSJS blocks (<script runat="server">) work. Errors are caught and shown in red in the Result panel.

Setup

1. In SFMC, create a CloudPage (landing page) in CloudPages.
2. Paste the full contents of AmpscriptEditor.html into the page (for example in an HTML content block or the code view).
3. Publish the page and open its URL.

No installed package, API credentials or Data Extensions are needed. The code runs with the permissions of the business unit that owns the CloudPage.

Usage

Paste this into the editor and click Run:

<script runat="server">
Platform.Load("core","1.1.5");
try {
    Write('Hello world');
}
catch(e) {
    Write(Stringify(e));
}
</script>

An AMPscript example:

%%[ SET @now = Now() ]%%
Current time: %%=v(@now)=%%

Project structure

AmpscriptEditor.html   The whole tool: HTML, client-side JS and server-side SSJS

Known limitations

• Newlines are removed. Code is joined into one line before it runs. An SSJS // comment therefore comments out everything after it. Use /* ... */ comments instead.
• Backticks break the page. The code and the result are written into JavaScript template literals. A backtick or ${ in your code or in the output breaks the page script.
• Output is raw HTML. The result is inserted with jQuery .html(), so any HTML or <script> it contains runs in the browser.
• The editor uses JavaScript highlighting for everything, including AMPscript.

Security

Anyone who has the page URL can run any AMPscript or SSJS in your business unit. That includes reading and changing Data Extensions, calling WSProxy and sending email. The page has no login.

• Do not publish it in a production business unit.
• Unpublish or delete the page when you are done.
• If you need to keep it, add your own access check before the render block.

Authors

Matheswaran Kanagarajan (all commits).