Help Page

Contents

  1. Getting Started
  2. Selection
  3. Context Menus
    1. Right Click
      1. Edit Text
  4. Clipboard Manipulation

1. Getting Started

TL;DR
  • Click on an element to select it.
  • Right click on an element to open a list of options that allow you to edit the element.
  • Open a new file through File >  New… or File >  Open….
  • Save the document through File > Download File…

The first thing you should do when you get on HTML Studio for the first time is to learn basic operations. The default document you see should tell you the first, most basic thing you can do with HTML Studio: click on elements to select them. Go ahead, click on any of the text shown in the document editor and you should see that it lights up (probably flashing blue if you haven't had time to change any of the settings).

This is an example of what a selected element might look like.

If you see something like the text shown above, then congratulations; you've successfully selected your first element. That's cool but how do you actually do anything?

Editing elements is really easy; all you've got to do is right click on it. If you are on mobile or some other touch-only device, then unfortunately you're going to have a hard time using HTML Studio since you can't right click. After right clicking, you'll see a list of options appear that let you do anything from styling the element to changing the text displayed in the element. Click here for a more detailed explanation of what each option does. Let's start off with a simple  Edit Text…. Go ahead and click that option from the list of options. You should now see a text caret in the element you chose that allows you to edit the element's text. When you are done editing the text, click anywhere outside the element to save it. Click Here for more information about the cool stuff you can do while editing the text of an element.

The default document is pretty plain isn't it? We should we start a new document. There are two ways to start editing a new document, both using the File context menu found in the top left corner. Click File and you'll see the  New… option and the  Open… option.  New… will open a dialog where you can choose from a few presets to start a new document. Keep in mind that when you start a new document, the old one you were working on will be gone forever. MAKE SURE YOU SAVE BEFORE STARTING A NEW DOCUMENT.

If instead you have a local .html file that you would rather edit than start from a preset, you can select File >  Open…. This will open a separate dialog where you can drop in a file and open it in the document editor. This will also completely get rid of the current document, so again, MAKE SURE YOU SAVE.

Once you are done editing your document and you want to download it, go to File > Download File…. [This part of HTML Studio is still being worked on and isn't relevant yet.]

Check out the rest of this help page for a lot more features and tools of HTML Studio that weren't mentioned in this section.

2. Selection

TL;DR
  • Click elements to select/deselect them.
  • Hold Shift to add/remove the element from your current selection.

As mentioned in the Getting Started section, selecting elements really is the most basic operation in HTML Studio and it's what everything else is built off of. To select an element, all you have to do is click on it. A selected element looks something like this. You'll notice that it flashes so that you can easily spot it. Click on a selected element again to deselect it.

By holding Shift as you select an element, you can add the element to your current selection instead of replacing it. This allows you to select more than one element to work on. You can also remove elements from your selection by holding Shift and deselecting them. Shift-clicking works for most selection operations (e.g. Selection >  Select <body>, Selection >  Select Parent(s)); the elements will be added to the selection instead of replacing it as long as you are holding shift.

See the Selection context menu section for more details, or the Keyboard Shortcuts section for shortcuts relating to selecting elements.

3. Context Menus

TL;DR
  • Right click elements to open an editing context menu.
  • Click header sections like File and Edit to open another type of context menu.

Context menus are lists of options that appear upon different user interactions in HTML Studio. Simply right clicking on an element will bring up a context menu where you can choose different options that can edit and manipulate the selected element(s). Different context menus will appear depending on whether one or multiple elements are selected. You can also open other context menus by selecting any of the header sections (File, Edit, etc.) at the top of the page. Each context menu is discussed in detail in the following sections.

3.1. Right Click

TL;DR
  •  Edit Styles… allows you to edit the element's CSS.
  •  Edit Attributes… allows you to edit the element's attributes.
  •  Edit Class Name… allows you to quickly edit the element's classes
  •  Edit ID… allows you to quickly edit the element's ID
  •  Insert Child… inserts a child node into the selected node.
  •  Select Children selects all immediate children of the node.
  •  Select Parent selects the immediate parent of the node.
  •  Edit Text allows you to edit the element's textual content.
  •  Edit as HTML… allows you to edit the node's HTML.
  •  Delete Node… removes the node from the document.
  •  Copy Element… copies the selected element.
  •  Cut Element… cuts the selected element.
  •  Paste in Element… pastes any copied HTML into the selected node.

The right click context menu can be accessed by selecting one or more elements and right clicking anywhere in the document editor. A picture of the context menu is shown below.

A basic summary of each option is provided below.

Edit Styles

Edit Styles opens a dialog with a row of text boxes for each of the element's styles. Only the styles in the elements style attribute are shown. To edit the styles in CSS style sheets, use the Style Sheets context menu.

Edit Attributes

Edit Attributes does nearly the same thing as Edit Styles except that each row corresponds to an attribute instead of a style. Only the attributes defined in the element's HTML are shown (e.g. id, class, tabindex).

Edit Class Name

(Shortcut: Ctrl/⌘ + .) Edit Class Name opens a small textbox where you can quickly edit the classes of the selected element without having to open the entire Edit Attributes dialog and waste time. This option is meant as a time-saving shortcut.

Edit ID

(Shortcut: Ctrl/⌘ + Shift + 3) Edit ID is the same as Edit Class Name except that the textbox lets you change the element's id instead.

Insert Child

Insert Child opens a dialog that allows you to enter a new child element into the selected element. You can choose what the child's node name should be as well as where it should be in relation to the element's other children.

Select Children

(Shortcut: Ctrl/⌘ + ↓) Select Children selects the direct children of the selected element. If you hold shift while selecting this option, the children will be added to your current selection instead of replacing it.

Select Parent

(Shortcut: Ctrl/⌘ + ↑) Select Parent is exactly the same as Select Children except the direct parent of the element is selected instead.

Edit Text

Edit Text makes the selected element contenteditable so that you are able to edit the inner text of the element directly from the element itself. There are some cool things you can do when editing the text. View the main Edit Text section for more details.

Edit as HTML

Edit as HTML opens a dialog that displays the elements outer HTML. You can directly alter the HTML from the dialog and save it.

Delete Node

(Shortcut: Del or Backspace) Delete Node does exactly as it says; the selected element is deleted from the DOM.

Copy Element

(Shortcut: Ctrl/⌘ + C or Ctrl/⌘ + Shift + C) Copy Element copies the outer HTML of the selected element, including all its children. If you hold Shift while selecting this option, only selected children will be copied with the element. View the Clipboard Manipulation section for more details.

Cut Element

(Shortcut: Ctrl/⌘ + X or Ctrl/⌘ + Shift + X) Cut Element does the same thing as Copy Element, except that the copied element will also be removed from the DOM. View the Clipboard Manipulation section for more details.

Paste in Element

(Shortcut: Ctrl/⌘ + V) Paste in Element pastes any copied HTML into the selected element as a new child. View the Clipboard Manipulation section for more details.

A more limited context menu appears when more than one element is selected, since some options only work for one element. A multi-selection context menu has only the following options:  Delete Nodes…,  Edit Class Names…,  Select Children,  Select Parent(s),  Copy Elements…,  Cut Elements…, and  Paste in Elements….

3.1.1. Edit Text

TL;DR
  • Use Right Click >  Edit Text to change the inner text of an element
  • Use HTML entities like &copy;, &#169;, or &#xa9; to type special characters
  • Use CSS-like syntax to auto-add elements (<span[attr=val]#id.class>  ==>  <span attr="val" id="id" class="class"></span>)

The purpose of most webpages is to display text. Sure there are other elements to make a webpage look nice, but usually, the whole point of the webpage is to display text of some kind. That's why it's so important to be able to edit the text of elements really easily in HTML Studio. You can edit the inner text of an element by selecting it, right clicking to open a context menu, and selecting
 Edit Text from the list of options. This will focus the selected element and place a text caret inside of it. Now you can go about changing any words inside the element to whatever you want it to say.

You'll probably notice that the element has a flashing border around it so you can see exactly which element you're editing while still being able to see everything inside the element clearly. Obviously, if you are editing something like the body element, the border won't show up since it's being cut off by the side of the screen.

Editing the text of an element is really cool and all, but it only helps when you want to type some basic characters that your keyboard lets you. For example, what if you wanted to type a copyright symbol? HTML Studio is able to recognize special sequences of characters (called HTML entities) and translate them into any symbol. If you're already familiar with HTML entities, then inputting special characters will be really easy. If not, it's really simple. Here's a website that tells you all the HTML entities you could ever want. With the copyright symbol example, all you would have to type into the element is "&copy;" and you'll notice the text should start flashing.

This is an example of what the flashing text might look like.

Once you see some flashing text, click on it to replace it with its translated value. In the case of the copyright symbol, clicking on "&copy;" will replace the text with "©". This way, you'll never have to go look up random characters you want to paste into the element; you can just type them using their HTML entity.

HTML Studio also recognizes certain CSS-like syntax to add elements into the element being edited. While typing the text for the element, you can use the following format to add an element without having to mess with the element's HTML: <nodeName[attribute=value][attributeWithNoValue]#id.class1.class2>. For example, say you wanted to make a new link with red text and an id of "link". You would use <a[href=https://example.com][style=color:red;]#link>. After clicking the text (it will flash like the text shown above), you should see "[Inserted Element]". As you can see, HTML Studio will generate the corresponding element with the right attributes and allow you to change the text of the element right away.
*NOTE: Notice that no white space is allowed in the element-replacer text. To use white space in an attribute (e.g. <nodeName[style=border: 1px solid black]>), you have to quote the value (e.g. <nodeName[style="border: 1px solid black"]>). Single quotes work too. Also quote values that use special characters (like "=") in order for them to be interpreted correctly.

Once you're done editing the element's text click anywhere outside the element to finalize the change and continue editing. You can also double click the element or use Enter + Shift/Ctrl/Alt/⌘ to save the changes.