Take static HTML snapshots of dynamic web applications and use them for collaboration, styling and prototyping.
Open your app in Pinegrow Snapshots, navigate to any screen or state and save it as a static HTML snapshot. Then track changes and port them back to your app.
Note, snapshots are not images. They are static HTML representations of a web application state.
New in Snapshots 1.1
Track HTML edits directly in Pinegrow Snapshots .
Free trial is included.
The folowing story illustrates the use of Pinegrow Snapshots:
A team is working on creating their SaaS solution called Amazing Pine App. The app is built with React, GraphQL and a mix of server-side technologies. Styling is done with a custom design system implemented in SASS. They use GitHub for collaboration and version control.
Are you a team of one?
You can still use Pinegrow Snapshots. "Designer", "Developer" and "Team manager" are just different hats you wear.
See the next section for some ideas on how single developer can use snapshots.
Ms. Pine Needle, the UX designer, opens Amazing Pine App (running on internal development server) in Pinegrow Snapshots. She navigates to the signup form and takes snapshots of all three signup steps.
She saves the snapshots under a new project called “Signup optimization”, located in a folder within a GitHub repository.
Ms. Pine Needle then opens the snapshots in Pinegrow Web Editor (or another editor she likes) and freely edits the content, HTML structure and styling.
She eliminates the second step of the signup process by bringing some of its input fields to the first step and deleting the optional fields.
Team members pull changes from GitHub and open modified snapshots in browser. They provide feedback through Slack. After a couple of iterations the team manager confirms the change.
Mr. Pine Cone, the developer, uses these snapshots as the blueprint for implementing the change.
For CSS edits that means copying new CSS rules to application stylesheets, or doing nothing if application stylesheets were mapped to the snapshot and Ms. Pine Needle edited them directly.
For HTML that means selecting "Show HTML changes" and porting highlighted changes to application source code.
Everyone with basic knowledge of HTML can participate, without endless exchange of Word files, screenshots and emails about changing H2 to H3.
Are you a team of one?
Use Pinegrow Snapshots when focusing on styling, prototyping or copy writing for your web app.
For example, you can use HTML snapshots for CSS styling your web application. No need to re-navigate to the screen you’re editing every time you refresh the changes.
Just do a quick reload of the HTML snapshot of that screen.
Or, even better, open the HTML snapshot in Pinegrow Web Editor and edit CSS/SASS stylesheets with instant live preview.
The perfect combination for editing HTML snapshots.
Pinegrow Web Editor is a desktop app for editing HTML and CSS, both visually and through code. It comes with integrated SASS/LESS compiler so that you see a live preview of everything you do.
Although Pinegrow Web Editor is not tied to any particular framework, it comes with complete support for Bootstrap and Foundation, including component libraries, properties and styling.
You can easily develop your own plugins to implement support for your custom frameworks.
Learn more about using Pinegrow Snapshots.
Pinegrow Snapshots is a simple app on its own. But its true power comes from integrating it into your development workflow.
The best is to start by downloading a trial version and playing around with creating snapshots of your projects.
Check out the documentation to see different scenarios of how to do that.
Free trial is included.
Pinegrow Snapshots is available as a yearly recurring subscription. You can cancel at any time. The subscription comes with 30 days money-back guarantee.
Do you also need Pinegrow Web Editor?
We have a great deal for you!
Don't want to deal with individual licenses?
Get the All-Inclusive Package with unlimited Pinegrow Web Editor and Snapshots licenses for your whole team.
You'll be charged every year. Cancel at any time. Includes 30 days money-back guarantee.
Not 100% sure if Pinegrow Snapshots is right for you? No worries. Try it without risk. Please note that refunds are not available for monthly subscriptions. Details.
Get support when you need it and participate in our friendly user community on Slack and on the online forum.
We work on Pinegrow apps full-time and publish frequent new releases. Check out the timeline of Pinegrow releases to see how fast Pinegrow is improving.
Are stylesheets, scripts, images and other resources stored locally as well?
Only HTML code that represents the current state of the app is saved in a snapshot. All other resources are hot-linked from their original location. That makes snapshots lightweight and easy to move around.
Can these snapshots be used for search engines, as pre-renders of single page apps?
Not really. There are other solutions for that. Pinegrow snapshots are mainly used for collaboration between team members on web app projects.
Is there a way to automatically insert code or map URLs?
Yes. Open Options to set the HTML code that is appended to the head element of every snapshot and define URL mappings. This is useful for exchanging production stylesheets with local editable stylesheets.
HTML formatting and Javascript can also be toggled there.
See documentation for details.
Are there any limitations?
At the moment, form input fields values are not stored into HTML code.
By default all Javascript code is removed from the page (this can be changed in Options). That means that any effects that rely on Javascript will not work.
Also, if Javascript is used to adjust the layout of the page in dependance on the device size, the stored layout will be fixed at the device size at which it was recorded.
Can I use it with React, Vue, PHP...?
Yes, you can use Pinegrow Snapshots of any web application, as long as it works in the browser.
That means you can use it with React, Vue, Rails, Node.js, PHP, WordPress...
Can I do editing and sharing directly in Pinegrow Snapshots app?
No. Pinegrow Snapshots has a single feature – taking HTML snapshots. Use your other tools (like Pinegrow Web Editor, GitHub, Slack…) for editing, collaboration and implementing changes.
All our web development applications work with your local projects and work well together with your other tools.
General purpose HTML & CSS editor that lets you build responsive websites faster with live multi-page editing, CSS & SASS styling, CSS Grid editor and smart components for Bootstrap, Foundation and the possibility to add custom frameworks.
Vue Designer is a visual IDE for Vue applications. It works with every Vite project and frameworks such as Nuxt and Iles.
Pinegrow Interactions is a powerful visual editor for designing web interactions and animations. Pinegrow Interactions extends Pinegrow Web Editor with interaction composer and fully-featured animation timeline editor based on GSAP.
Pinegrow Web Editor with integrated WordPress theme creator. Add WordPress smart actions to page elements to impart dynamic CMS functionality to the theme.
Export fully-featured, proper WordPress themes with content custom-tailored to each project.
Install Pinegrow on your WordPress site and turn it into a visual development environment for building custom blocks, whole themes and static HTML projects.
Use same features as WordPress Builder in Pinegrow Web Editor.
Standalone WordPress theme builder that lets you use any website builder to create custom WordPress themes.
After the conversion is set up, you keep using the original website editor to make changes to the theme.
An add-on for Pinegrow Web Editor that lets you visually edit TailwindCSS projects. It comes with the full range of visual controls and supports working with custom TailwindCSS themes.
Take static HTML snapshots of dynamic web applications and use them for collaboration, styling and prototyping.
Open your app in Pinegrow Snapshots, navigate to any screen or state and save it as a static HTML snapshot.
Great in combination with Pinegrow Web Editor.
An online space where children learn HTML & CSS and practice their skills on fun creative web projects.