Linked files and style sheets

Linking files to an html document

With linked files you can externally edit images, CSS files, JavaScript files, PHP include files, or other embedded data, and refresh the web preview automatically when those files are saved. To link a file, it must first be referenced in the HTML document (i.e., you must have an <IMG> tag for an image you want linked). Open the linked files drawer.


Press the "Linked Files" button to open and close the drawer

Next, either click on the "+" button (for Add) beneath the linked files table or drag a file onto the table from the finder. Setting the refresh to instantly in the options palette will increase the responsiveness. Now whenever the linked file is updated, the web view will be refreshed.

Note: It is a good idea to uncheck the "Cache data (faster)" box in the options palette, otherwise when the page is reloaded, you may not see the changes made.

The "Check Externally Linked Files Interval" slider controls the rate at which the linked files are checked for changes. Each tick represents one second.

Using a linked file from within Hyperedit

HyperEdit has special support for editing linked files, such as CSS or JavaScript files. After adding the CSS or JavaScript file to the linked files drawer of the HTML document (which can also be done by dragging the proxy icon in the titlebar), simply change the editing mode in the options palette to "Linked File (css/js)," and it will automatically be rendered. It can also be activated from the main menu via Preview:Editing Mode:Linked File (css/js).


Change the mode to "Linked File (css/js)" in the options palette

In linked file mode, the web preview will be collapsed, and the file will be saved automatically. A change in the document will refresh the HTML file it is linked to instantly.

Linked files can also be used for PHP editing. Link your include/require files, and any changes will refresh the main PHP document.

Using Style sheets

Style sheets can be attached to documents without using <link> or <style> tags. This is useful for writing blog entries or forum postings, where you want to test how it will look when published. To attach a style sheet to the document, select "Other..." from the Style sheet pop-up menu in the Options palette and select your file.


An attached style sheet in the options palette

The style sheet can also be set for all new documents by selecting it in the content tab of HyperEdit's preferences.

Note: Style sheets are cached, so changes will not show up in the preview pane. If you intend to edit the style sheet, use the linked file method mentioned above.