Using a web browser as a SAS code editor


Whether you are a SAS code creator, a blogger, a technical writer, an editor-in-chief, an executive, a secretary, a developer or programmer in any programming language or simply someone who uses computer or hand-held device for writing, you need to read this blog post – your life is about to change forever!

Did you know that you can use a web browser as a SAS code editor? I’m not talking about browser-based SAS programming interfaces like SAS Studio, a full-blown application. I’m talking about converting a regular web browser into a “notepad” where you can type, display, and save your SAS code. Or non-SAS code. Or practically anything. And you don’t even have to be connected to the Internet to use this browser functionality.

Converting a web browser into a notepad

This trick works with most modern browsers:

  • Chrome
  • Firefox
  • Opera
  • Safari

It will not work on Internet Explorer 11.

Try this: open your web browser (I am using Firefox in the examples below) or a new tab in your browser and type the following in the URL field (case insensitive):

data:text/html,<html contentEditable>

Hit Enter. Then click anywhere in the browser body.

Your browser has just turned into a Notepad. You can now type anything in it, including SAS code:

Using web browser as SAS code editor

In order to save your SAS code in Firefox, click on File ⇒ Save Page As… and save it as type Text Files (*.txt;*.text):

Saving SAS code in a browser as text file

This functionality is possible thanks to HTML5’s contentEditable attribute and the browsers’ ability to handle data URL.

I don’t know about you, but I find this browser-notepad feature very cool and handy. Not only does it allow you to type SAS code in your browser, but it also gives you the capability to take notes and copy & paste excerpts or code snippets from other web pages on non-web applications. If you use WebEx or Skype or Lync to present one of the SAS web browser-based products such as SAS Visual Analytics, SAS Visual Statistics, etc., you can share your browser to your audience and make one of the tabs a typeable area. Then during your presentation you may switch between browser tabs depending on whether you are presenting SAS VA/VS or your own on-the-fly typing.

Bookmark notepad in a browser

If you like this Notepad browser feature, you can easily bookmark it by placing it on the Bookmarks toolbar. In this case, I suggest typing the following line in the URL filed:

data:text/html,<html contentEditable><title>Notepad</title>

and then dragging the image in front of this URL string and dropping it to the Bookmarks toolbar to create a button. Then, every time you need a Notepad it is at your fingertips; you just need to click the button:

Bookmark SAS code editor in a browser

Styling your new SAS editor in a browser

By default, your browser editor does not look pretty. However, you can use HTML tags and apply CSS styles to them to make it look better. You can control font (style, size, color), margins, paddings, background and other CSS style attributes. For example, try the following URL:

data:text/html, <textarea style="width:100%; height:100%; padding:20px; font-size:2em; font-family: SAS Monospace; color:darkblue; border:none; border-left: 10px solid lightblue; margin-left: 30px;" autofocus/>

You may modify this URL as you wish. For example, you may modify the font size for your typing area. For the font size you may use "em"s or pixels, 1em = 16px. If you specify the font size in pixels use whole numbers, e.g. font-size:32px, font-size:24px, font-size:20px. If you specify the font size in "em"s you can use whole numbers or decimals, e.g. font-size:2em, font-size:1.5em, font-size:1.25em.

Your web browser editor becomes much more presentable:

Customized style in a browser-based notepad

The autofocus attribute places cursor immediately in the typing area of the browser notepad, without having to click on the browser body first.

I want to hear from you!

Do you like this editable browser feature? Would you use it to enhance your presentations? Do you envision yourself writing SAS code in a browser? An article, a blog post? What other usages can you envision using such a web browser transformation? Do you have any ideas to expand this notepad browser functionality beyond presenting, typing, taking notes, copying/pasting, and saving your SAS code? Can you apply SAS color syntax highlighting in a browser? Or a background image? How about submitting your SAS code from a browser?


About Author

Leonid Batkhan

Leonid Batkhan is a long-time SAS consultant and blogger. Currently, he is a Lead Applications Developer at F.N.B. Corporation. He holds a Ph.D. in Computer Science and Automatic Control Systems and has been a SAS user for more than 25 years. From 1995 to 2021 he worked as a Data Management and Business Intelligence consultant at SAS Institute. During his career, Leonid has successfully implemented dozens of SAS applications and projects in various industries. All posts by Leonid Batkhan >>>


  1. Hi there- I learned about the short code to set up just a notepad in the browser then I came across another one of your articles on sprucing it up a bit as I was looking for a way to make the background ...not white.

    • Leonid Batkhan

      Hi Ducky,
      Yes, you can change the background color. You just need to add background-color:your_color; attribute within the textarea style string. For example:
      data:text/html,<textarea style="width:100%; height:100%; padding:20px; font-size:1.5em; font-family: arial; color:darkblue; background-color:33aa88; border:none; border-left: 10px solid lightblue; margin-left: 30px;" autofocus/>
      your_color can be either color name (see or hexadecimal triplet (some browsers will allow # in front of it, e.g #33aa88, some won't).

  2. Leonid, Thanks for your blog! I too now have a "Notepad" button on my browser toolbar (in Firefox). Will I use if for writing SAS code? Probably not, but I can see myself using it for other purposes such as editing text data files for use in SAS. I love that this technique is so simple, yet I had never heard of it before. I also love your suggestion that you can flip back and forth between an application (for me it would be SAS Studio or WordPress) in one tab and your notepad in another tab. That is so much smoother than the usual way of switching between windows during a presentation. This is one of those creative techniques that could spark all kinds of ideas. -Susan

  3. Lenny, I really enjoyed learning about this browser capability! I now have a button for 'Notepad' created and am sure I'll find plenty of uses for this.

Leave A Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back to Top