Smart Insert – AI Style editing – Auto create components and WordPress blocks – Block themes & more.
Download Pinegrow 8.2
The package includes Pinegrow PRO, WordPress, WooCommerce, Interactions and Tailwind editor.
Pinegrow for Mac (Intel) Antivírus checkedMac: c1909e6f8aafa151397f60a6450e1645cdab4d53
Pinegrow for Mac (Apple Silicon) Antivírus checkedMac: 1c1c810529653e6887768d7a427e344e7cde03cc
Pinegrow for Windows 64 (Installer) Antivírus checkedWindows: be1fe382748de8a853d7ddc66d345190b850715a
Pinegrow for Linux (Zip, 64bit) Antivírus checked Linux: ad90038190a6f8ccc5013e0994057a71700fb963
Pinegrow WordPress Plugin 1.0.20
Pinegrow WordPress Plugin (Zip)
Pinegrow WordPress Plugin and Pinegrow Online are already updated with the same features.
About the role of AI in Pinegrow
Pinegrow 8.2 brings even deeper integration of AI Assistant into its editing features, including:
- Drag & drop (and other operations that add HTML elements to the page),
- Automatic creation of HTML components and WordPress blocks and
- Editing Tailwind CSS Styles.
With these power-ups the AI Assistant makes many tedious tasks a breeze and therefore can save a lot of your precious time and effort. As a result, it has never been easier to create static HTML and WordPress projects.
Bring your own AI API key
Please note that you need an AI provider’s API account (or a local LLM) to use Pinegrow’s AI Assistant.
Pinegrow uses “bring-your-own-AI-API-key” approach. This gives you total control over which AI provider you use, how much you use and pay. The effort of signing up the account is minimal compared to how much time this can save you in the long run. We prepared a guide on how to sign up with OpenAI and / or Anthropic.
Recommended AI provider and model
At the moment, the best AI model for web development in Pinegrow is Anthropic’s Claude Sonnet 3.5 (at the moment). It gives best results in all tasks in Pinegrow, even when compared to OpenAI model. Therefore, if you can, use Claude Sonnet with Pinegrow.
If a better alternative comes up, we will update this recommendation.
Now, let’s take a look at the improvements in Pinegrow 8.2.
Smart Insert (AI)
Smart insert automatically customizes every HTML element that is added to the page through drag & drop, insert menu or paste command.
Smart Insert adjusts the inserted element with the content and styling of the current project. It can even convert Bootstrap styling to Tailwind, and vice versa.
Watch this short video to see it in action:
To activate it, use the Smart Insert toggle in the top toolbar:
Click on the caret next to the icon to open Settings:
- Use content sources includes project’s content sources into every Smart Insert command, so that the AI Assistant has more information about how the element should be customized.
- Manage content sources is used to add and remove URLs, local files and text.
In addition to content sources, a context of the area into which the element is being inserted is also passed to the AI Assistant.
- Whole document includes the whole page. This gives the best results, but uses more tokens.
- Surrounding area includes the surrounding elements.
In general, Smart Insert can use up a lot of input tokens and that is something you need to be mindful of. Smart Insert displays the size of the context and content sources each time it is run. Note that the size is in KB, not in tokens. Rough calculation would be that 1000 tokens equals to 3KB.
Examples
Take a look a some of the example websites that Emmanuel created with Smart Insert.
Including content sources in other AI commands
Use the Sources toggle in the AI Assistant panel to include content sources with other AI commands.
Editing Tailwind Styles with AI Assistant (AI)
The AI Assistant can now edit and manage styles in Style manager. Styles are a Tailwind Visual Editor feature and can also be used to implement general rule-based CSS styling with the convenience of Tailwind.
See the AI styling in action:
Auto create HTML Components (AI)
Pinegrow’s Define Component action now has the Auto create button that uses the AI Assistant to create a fully editable component.
Auto create WordPress Blocks (AI)
Block action in the WordPress panel also has the Auto create button that turns the selected element into a custom WordPress block – including editable attributes, sub-blocks and showing posts and site information.
Watch how the AI Assistant can help you create WordPress blocks:
Other new WordPress features are:
Exporting WordPress Block Themes
WordPress builder can now export Block Themes. Check Enable site editor in Theme settings.
Define default block category for the whole project
Also in settings, define and optionally create a block category that will be the home for all custom blocks in the project, unless set on the Block action.
Other AI Assistant improvements (AI)
Other improvements are:
- Take photo of the selected element and include it in the prompt
- Clear chat history on project load
- Colors and fonts used in Design panel are passed to the AI Assistant
- Brief helper guides you through creating a Project brief. Project brief (even if short) greatly increases the accuracy of the AI Assistant.
Other general improvements
- Pinegrow now uses a better file watcher that should help with reloading files that are changed outside Pinegrow.
- Find and replace can handle large number of text matches. Delete element action is available.
- Bug fixes.
Download Pinegrow 8.2
The package includes Pinegrow PRO, WordPress, WooCommerce, Interactions and Tailwind editor.
Pinegrow for Mac (Intel) Antivírus checkedMac: c1909e6f8aafa151397f60a6450e1645cdab4d53
Pinegrow for Mac (Apple Silicon) Antivírus checkedMac: 1c1c810529653e6887768d7a427e344e7cde03cc
Pinegrow for Windows 64 (Installer) Antivírus checkedWindows: be1fe382748de8a853d7ddc66d345190b850715a
Pinegrow for Linux (Zip, 64bit) Antivírus checked Linux: ad90038190a6f8ccc5013e0994057a71700fb963