Home/ Documentation/ Panels & Tools/ Edit remote websites and web applications

Edit remote websites and web applications

Let’s take a look at how Pinegrow Web Editor can be used to open and edit websites and applications from local or remote web servers.

With Pinegrow we can open documents in two ways:

  • Work with local files directly, for example, opening, editing and saving a HTML file on your computer.
  • Open URLs directly from the internet or from your local development server.

In this guide we’ll take a look how we can use Pinegrow to work with remote URLs.

Pinegrow Web Editor 5.92 or higher is required. This feature requires Pinegrow PRO edition because it relies on projects. Older Pinegrow versions have a more limited URL editing support.

Examples of remote projects are:

  • Static HTML websites on the remote server
  • WordPress sites
  • Server-side (PHP, Rails, Node…) applications
  • React single-page applications running on the production or development server

When we say remote, we refer to documents that are not accessed directly from your local file system. That can include projects running on your local web development server.

Pinegrow does not download the complete website with all its resources to your computer. That’s not its purpose. Instead, it locally saves only the modified files and injects them into the remote page when you re-open it in Pinegrow.

Common use cases

We can use all HTML and CSS editing features of Pinegrow on documents accessed with Open URL.

That said, Pinegrow can’t be used for editing the source code of your remote project if it is a server-side or Javascript-based web application.

SASS and LESS styling is also not supported.

Therefore, the most common use-cases are:

  • Edit CSS styling of a remote website or application.
  • Edit HTML of remote static HTML websites.
  • Edit HTML of web applications as a way of prototyping changes and new features

Limitations

Editing remote documents has the following limitations:

Remote URL editing might not work with your project. Complex Javascript code or web server configuration can clash with the way how Pinegrow works. Some apps even cause Pinegrow to crash.

The best approach is to try and see if it works.

Please note that unless the problem involves an obvious Pinegrow bug, the Pinegrow support team is not able to offer support related to your specific project.

The workflow

The general Pinegrow Web Editor workflow for remote projects is:

  • Use Open URL to open a document. Select a local folder for saving modified HTML and CSS files.
  • Make changes to the HTML structure and CSS styling.
  • Save changes. Modified files will be stored in a selected local folder.
  • Next time you open this URL in Pinegrow, any resource that is saved locally will be loaded instead of the original remote resource.

Here is an example of a typical scenario:

Let’s open a remote WordPress page with Open URL, for example docs.pinegrow.com, the Pinegrow documentation site:

Before opening the URL we have to select or create a local folder that will be used for saving modified files:

The selected folder is now opened as Pinegrow project:

Alternatively, we could first open the project and then use Open URL to open the remote document.

Let’s use the Style panel to make styling changes to pg_docs.css. We have to unlock the stylesheet first because remote stylesheets are locked by default:

We’ll change the background and margin of inactive navigation tabs:

Save changes. Modified pg_docs.css is saved into a selected local folder:

Next, we’ll change the HTML code of the page by changing “Documentation” tab label…

…into “Guides”:

Save the changes. The modified HTML files is now saved to the folder as well.

Let’s close Pinegrow and take a break.

When we come back to this task, we can open the local project directly, it will be listed in the Open recent section:

We can then quickly re-open the previously edited URL from the project menu -> Remote URLs -> Recent:

The page and all its resources are loaded from the website – except the modified pg_docs and the HTML document that are loaded from the local folder.

Notice that the tab label and styling are just as we set them before:

Continue making CSS changes.

Preview how the changes look on the site without having to upload changed files. We see that in Pinegrow, as well as by using the browser preview:

Share the project with the team so that they can take a look or contribute.

When the task is complete, upload the modified pg_docs.css to the WordPress theme folder on the server by whatever method we’re using with this project.

We can’t just upload the changed HTML file because the website is a WordPress site. The changed HTML can serve as a blueprint for changes that we then do in the theme source code or in WordPress admin panel.

Using the locally saved files

Modified HTML and CSS files are stored in a selected local folder (or the current open project) in mapped_urls subfolder.

Pinegrow doesn’t upload files to the server. We have to use the appropriate method for our project, for example:

  • Upload changed files to the server with your favorite file transfer tool.
  • Copy changed files to your source control system, like Git repository.
  • Use changed files as a prototype or blueprint for implementing the changes in the source code of your web application.

Let’s take a look at the details.

Open the URL

Use File -> Open URL and enter the URL you want to open.

There, we also need to select a local folder/project that will be used for storing modified files.

If a project is already open, it will be used for this purpose.

Click on Open URL button to load the document.

Edit the HTML structure

Use powerful tools to edit HTML document, including

Edit the CSS styling

Use the Style panel to edit styling of the document.

If we want to upload changed stylesheets back to the server, deactivate minimizing and combining stylesheets on the server. For example, in WordPress deactivate an optimization plugin.

Remote stylesheets are locked by default. Unlock a stylesheet by clicking on the orange lock icon.

Saving the changes

Use File -> Save or CTRL + S (CMD + S on Mac) to save the changes.

Files will be placed inside the mapped_urls/<hostname>/<url path> folder at the base of the current project.

For example:

  • If we selected /Users/Me/Work/Project1 as the folder/project when opening the URL, and
  • opened the url https://mysite.com/products
  • the saved files will be put into the /Users/Me/Work/Project1/mapped_urls/mysite.com/ folder.

Note that URLs without extension (like https://mysite.com/projects) will be saved as index_default.html .

Re-opening the URL

URLs opened in this way are not listed in the global recent file list.

Instead, we can re-open URLs by:

  • Open the project menu, go to Remote URLs and select a URL from the Recent list.
  • Click on the .html file inside the mapped_urls folder in the project panel. Pinegrow recognizes such files and opens them as URLs.
  • Go to File -> Open URL and enter the URL again.

When the URL with saved resources is opened, such resources are loaded from their local versions. All other resources are loaded from the remote server.

For example, if the HTML document was modified and saved, the saved version will be loaded instead of the remote version. The same happens with CSS stylesheets.

Working with dynamic HTML elements

Dynamic HTML elements are created by Javascript code after the page loads.

Starting from Pinegrow Web Editor 5.92, you can select and edit dynamic elements on the page. Dynamic elements have an orange border and menu, the static elements have blue.

Learn more about working with dynamic HTML elements.

Deleting saved changes

If we want to load a fresh version of the project, simply delete:

  • the whole mapped_urls folder, or
  • just specific subfolders or files.

Note that doing this will delete any locally saved changes.

Collaborating on projects

Folders that store modified files are self-contained and portable.

For example, we can select a Git repository as the folder where modified files are stored and edit the project with your team.

Or, we can send the folder to our colleagues and clients so that they can preview changes. Note that they will need to open the project in Pinegrow in order to correctly inject modified files and preview changes.

Troubleshooting

If the remote project doesn’t load correctly, try loading it with disabled Javascript by toggling the Javascript icon in the toolbar.

For example, some React projects serve static HTML and then activate the dynamic parts when the Javascript code loads. In situations where active parts cause issues in Pinegrow, turning the Javascript off lets Pinegrow display the static version of the page.

Try it out

Open these URLs in Pinegrow and take remote editing for a spin: