Web and Markdown Preview

Textastic includes a built-in web preview that lets you preview HTML, CSS, JavaScript, and Markdown files locally, as well as view remote websites and files.

Opening the Web Preview

Tap the Web Preview button (glasses icon) to open the web preview screen.

The web preview uses the same WebKit engine that is used by Safari and provided by the system (WKWebView). For previewing Markdown, Textastic uses MultiMarkdown.

Choosing Local vs Remote Preview

Local Preview

By default, the preview shows the local file you’re currently editing.

To view another local file, you can enter a different local file path in the address bar.

Remote Preview

If you want to view a remote website or file, you can switch from Local to Remote and enter an arbitrary URL in the address bar:

Note

URLs (including query parameters) are only supported when you switch to Remote preview. For Local preview, you can only enter file paths that are relative to the root of the file you are previewing. For example, if you preview a file stored in Local Files, enter a file path relative to the Local Files root folder.

Resetting the Local Path and Remote URL

Textastic will automatically remember the local path and remote URL you enter for each file and restore it the next time you open the web preview for that file.

To reset the local path or remote URL:

1. Tap the address bar.

2. Clear it with the gray X button.

3. Press Go on the on-screen keyboard or Return on an external keyboard.

Preview Workflows by File Type

Static files

You can directly preview HTML, CSS, JavaScript, and Markdown locally. WebKit also handles other static formats such as PDF, video, and audio.

PHP (and other server-side languages)

Textastic provides syntax highlighting only; it doesn’t bundle interpreters. A local preview therefore renders the HTML part while the PHP code is ignored.

To see the dynamic output:

1. Upload the PHP file to a test server.

2. Open the preview, switch from Local to Remote.

3. Enter the page’s full URL in the address bar and tap Go.

LaTeX

Local preview can’t compile TeX, but you can still view the finished PDF with a small remote workflow:

1. Upload the .tex file via SFTP (or another remote connection).

2. Use the SSH Terminal to run your TeX compiler on the server, creating a PDF.

3. Move or copy that PDF to a web-accessible folder on the same server.

4. In Textastic’s preview, switch to Remote and enter the PDF’s full URL.

The PDF loads in the preview pane, and you can repeat the cycle after each edit-and-compile run.

References to JavaScript, CSS, and Image Files

To preview an HTML file that references external JavaScript, CSS, or image files, make sure those assets are stored in Local Files, iCloud, or in a folder added via Add External Folder…. Otherwise, the preview can’t load them because the system sandboxes each app’s file access.

Caution

If you open individual files with the Open… command instead, linked files cannot be accessed by the web preview.

Also, ensure that referenced file names match exactly, since the file system on iOS is case-sensitive.

Custom HTML and CSS for Markdown Preview

Textastic can use custom HTML and CSS when previewing Markdown files.

Save your custom HTML in the file Local Files/#Textastic/markdown_head.html and your custom styles in the file Local Files/#Textastic/markdown.css (the names are case-sensitive).

The web preview will use these files when rendering Markdown, allowing you to customize the appearance and functionality. For example, you can use markdown_head.html to load JavaScript libraries like MathJax or Highlight.js.

To simplify customization, you can open and edit these files directly by tapping the buttons under Customize Markdown Preview in Settings ‣ Web Preview.

See also

Add the Special Folder Called “#Textastic”.

JavaScript Console

For debugging purposes, you can use the JavaScript console. It shows JavaScript errors and messages logged using the JavaScript Console object. If available, the file and line number that caused the message is also shown.

The list updates live while the preview is open.

If there are any messages in the console, the Console button (“list with arrow” icon) displays the number of messages in a badge.

The messages in the screenshot above were generated by the following HTML file with JavaScript code:

console_test.html

<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8" />
   <title>Console Test</title>

   <script>
      function test() {
         console.log("this is a console.log() test message");
      }

      window.setInterval(test, 1000);

      console.debug("debug message");
      console.warn("warning message");
      console.error("this is an error");

      var obj = { property1: "text", property2: 5 };
      console.log("object log: ", obj);

      console.assert(obj.stri, "your message here")
   </script>
   <script src="test.js" type="text/javascript"></script>

</head>
<body>

<div id="main">

  <h1>JavaScript Console Test File</h1>

  <p>You can use Textastic's built-in JavaScript console to see JavaScript errors and log messages using the console object.</p>

</div>
</body>
</html>

test.js

function test() {
   console.log("hello from external js file");
}

test();

You can tap on a message in the console to copy the message or to open the source file at the location that caused the message:

Note

You cannot preview standalone JavaScript files directly. Include or reference them from an HTML file.

Preview in Safari

When previewing a file, Textastic runs a small web server that serves static files. This enables another powerful feature: opening the preview in Safari.

On iPad, you can use that in combination with Split View to see the source code of a website in Textastic and a web preview in Safari at the same time:

Tap the … button in the top-right corner and then Preview in Safari to open the preview in a new Safari tab.

You can also tap and hold the Web Preview button (“glasses” icon) and choose Preview in Safari:

Configuration

You can configure the port of the preview web server in the Web Preview Settings.