# Frameworks Lite For Pinegrow - A Community Plugin (free & open-sourced) **URL:** \ **Category:** Third party Apps & plugins related to Pinegrow\ **Created:** [December 28, 2023, 12:06pm UTC](https://forum.pinegrow.com/t/frameworks-lite-for-pinegrow-a-community-plugin-free-open-sourced/8614 "2023-12-28T12:06:08Z")\ **Posts on this page:** 17\ **Page:** 1
**Author:** ![TechAkayy](https://avatars.discourse-cdn.com/v4/letter/t/ce73a5/32.png) [@TechAkayy](https://forum.pinegrow.com/u/TechAkayy)\ **Post date:** [December 28, 2023, 12:06pm UTC](https://forum.pinegrow.com/t/frameworks-lite-for-pinegrow-a-community-plugin-free-open-sourced/8614/1 "2023-12-28T12:06:08Z")
Dear all, Happy to share this free & open-source plugin for the community. A quick extract from the repo’s readme here for your quick read: ## Frameworks Lite For Pinegrow - A Community Plugin A [Pinegrow](https://pinegrow.com/) Plugin that provides the ability to [progressively enhance](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement) your HTML with light-weight framework directives via the Props Panel. Currently supported frameworks - [Petite Vue](https://github.com/vuejs/petite-vue), [Vue](https://vuejs.org/guide/quick-start.html#using-the-global-build) and [AlpineJS](https://alpinejs.dev/start-here). To add a new framework, refer to the [Development & Contribution](https://github.com/TechAkayy/frameworks-lite-for-pinegrow#development--contribution) section. ❗Note: This is not an official plugin by the Pinegrow team, rather a personal contribution for the community. Follow me on twitter - [@techakayy](https://twitter.com/techakayy) 💻 Pinegrow plugins can be used only with Pinegrow desktop apps like Pinegrow Web Editor or Vue Designer. So, this plugin is not for Pinegrow Online or Pinegrow WP Plugin. Also, [Vue Designer](https://vuedesigner.com/) already includes this feature. 💙 This plugin is free to use, open-sourced with MIT license. Feel free to fork and improve. PRs, improvements to documentation, text/video tutorials are welcomed. 👏 Frameworks via cdn can be used with other Pinegrow Pro features like components, master pages, and also with Wordpress. Any contribution to the documentation showcasing such usage are welcomed. ### For more details, usage, customziation, check out the repo here - > **[GitHub - TechAkayy/frameworks-lite-for-pinegrow: Vue, Petite-Vue, AlpineJS, HTMX for Pinegrow](https://github.com/TechAkayy/frameworks-lite-for-pinegrow)** > > Vue, Petite-Vue, AlpineJS, HTMX for Pinegrow For issues/discussion, use the github repo features, or post in this thread. Welcome all feedback, contributions & educational contents using the plugin. Thanks all, Happy Holiday 🙂 ---
**Author:** ![Dom](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/dom/32/4887_2.png) [@Dom](https://forum.pinegrow.com/u/Dom)\ **Post date:** [December 28, 2023, 3:59pm UTC](https://forum.pinegrow.com/t/frameworks-lite-for-pinegrow-a-community-plugin-free-open-sourced/8614/2 "2023-12-28T15:59:17Z")
@TechAkayy Very neat addition to the Pinegrow editor. I’m wondering how long it will be before users of it begin to think along the lines I started to as soon as I looked seriously at Vue Designer. ---
**Author:** ![adamslowe](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/adamslowe/32/4590_2.png) [@adamslowe](https://forum.pinegrow.com/u/adamslowe)\ **Post date:** [December 28, 2023, 4:25pm UTC](https://forum.pinegrow.com/t/frameworks-lite-for-pinegrow-a-community-plugin-free-open-sourced/8614/3 "2023-12-28T16:25:45Z")
You are on fire, man. I can’t wait to check this out. Thanks for all your hard work! ---
**Author:** ![TechAkayy](https://avatars.discourse-cdn.com/v4/letter/t/ce73a5/32.png) [@TechAkayy](https://forum.pinegrow.com/u/TechAkayy)\ **Post date:** [January 11, 2024, 9:27am UTC](https://forum.pinegrow.com/t/frameworks-lite-for-pinegrow-a-community-plugin-free-open-sourced/8614/4 "2024-01-11T09:27:57Z")
Dear all, [Frameworks Lite v1.1.0](https://github.com/TechAkayy/frameworks-lite-for-pinegrow) is out now. Here is the release notes: - Ability to use the plugin on both single HTML page (free version of Pinegrow) and projects (requires Pinegrow pro). - Via Frameworks menu, add CDN scripts of different flavours either as Global App (or) Islands easily to your page. - Via Frameworks menu, enable “Auto reload on update” to automatically refresh page when adding/updating a directive. - `v-*` and `x-*` tags are now displayed in the page tree, so that it’s easy to identify them. - Search option - when clicking ‘Add directive’ button, directives can be easily searched. - Alpinejs - when adding x-for or x-if, the content is automatically wrapped inside a `template` tag, as required by alpinejs design. If you want to subscribe to future updates to the plugin, follow this [link](https://github.com/techakayy/frameworks-lite-for-pinegrow#subscribe-for-updates). Also, the plugin is free & open-sourced, so if you are up for an adventure to explore extending Pinegrow with your own custom plugin/ideas, feel free to explore this repo, and let me know if you require any help with it! Please share your feedback, star the github repo, and join as contributors if you are interested! Thank you! **The readme now includes step-by-step instructions with annotated screenshots for quick-start. Please refer to the [repo](https://github.com/TechAkayy/frameworks-lite-for-pinegrow) for the full set of instructions.** ![06-choose-framework](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/a/a78016b26094ea41c793dd85a5ff57136dd0a469.jpeg) ---
**Author:** ![madjedo](https://avatars.discourse-cdn.com/v4/letter/m/cc9497/32.png) [@madjedo](https://forum.pinegrow.com/u/madjedo)\ **Post date:** [January 11, 2024, 11:46pm UTC](https://forum.pinegrow.com/t/frameworks-lite-for-pinegrow-a-community-plugin-free-open-sourced/8614/5 "2024-01-11T23:46:06Z")
Dude great work. I will soon start embarking on a journey to learn react. Please convince me why i should learn Vue instead. ---
**Author:** ![TechAkayy](https://avatars.discourse-cdn.com/v4/letter/t/ce73a5/32.png) [@TechAkayy](https://forum.pinegrow.com/u/TechAkayy)\ **Post date:** [January 12, 2024, 6:45am UTC](https://forum.pinegrow.com/t/frameworks-lite-for-pinegrow-a-community-plugin-free-open-sourced/8614/6 "2024-01-12T06:45:46Z")
I have never used react, except for simple vite experimentation. Jsx & css-in-js never appealed to me from the start. Vue uses classic html & css for templating, so it was quite natural for me. I’m curious to know your future experience with Jsx based templating with react, please share with us all 😉 ---
**Author:** ![TechAkayy](https://avatars.discourse-cdn.com/v4/letter/t/ce73a5/32.png) [@TechAkayy](https://forum.pinegrow.com/u/TechAkayy)\ **Post date:** [January 15, 2024, 3:30pm UTC](https://forum.pinegrow.com/t/frameworks-lite-for-pinegrow-a-community-plugin-free-open-sourced/8614/7 "2024-01-15T15:30:53Z")
[Frameworks Lite v1.1.1](https://github.com/TechAkayy/frameworks-lite-for-pinegrow) is out now. Here is the release notes: - Examples from official petite-vue docs are now available as page templates. - v-cloak and x-cloack style tags are removed from head (only within Pinegrow), to avoid conflict with pinegrow dom-play. - Directives & page templates refreshed. - Truthy directives are displayed as “true” in the `Add directive` section, but the “true” value is in fact not added to the tag - fixes [#2](https://github.com/TechAkayy/frameworks-lite-for-pinegrow/issues/2) ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/9/995082d310439cf7e958c659ab4a3ee2e23cae10.png) If you want to subscribe to future updates to the plugin, follow this [link](https://github.com/techakayy/frameworks-lite-for-pinegrow#subscribe-for-updates). ---
**Author:** ![TechAkayy](https://avatars.discourse-cdn.com/v4/letter/t/ce73a5/32.png) [@TechAkayy](https://forum.pinegrow.com/u/TechAkayy)\ **Post date:** [January 20, 2024, 11:35am UTC](https://forum.pinegrow.com/t/frameworks-lite-for-pinegrow-a-community-plugin-free-open-sourced/8614/8 "2024-01-20T11:35:36Z")
[Frameworks Lite v1.2.0](https://github.com/TechAkayy/frameworks-lite-for-pinegrow) is out now. Here is the release notes. If you want to subscribe to future updates to the plugin, follow this [link](https://github.com/techakayy/frameworks-lite-for-pinegrow#subscribe-for-updates). - The v-cloak or x-cloak inline style tag can be added to the `` tag via the `Frameworks` menu. - Directives and page templates have been refreshed. - Directives input box now includes both a clear icon and a delete icon. Previously, truthy directives were displayed as `true` in the control, but not anymore. It will always be in sync with the actual attribute key-value pairs. This also fixes #2. - Progressive Enhancement → Progressive Hydration (how/when to hydrate islands to improve performance) ---
**Author:** ![TechAkayy](https://avatars.discourse-cdn.com/v4/letter/t/ce73a5/32.png) [@TechAkayy](https://forum.pinegrow.com/u/TechAkayy)\ **Post date:** [January 20, 2024, 12:04pm UTC](https://forum.pinegrow.com/t/frameworks-lite-for-pinegrow-a-community-plugin-free-open-sourced/8614/9 "2024-01-20T12:04:15Z")
With the above update (v1.2.0), I consider the plugin to be feature-complete for its intended use. Any further updates will probably be restricted to bug fixes (for existing features) and documentation/tutorials. I’m hoping any feature requests will be community-driven, so feel free to check the source and hack around 👍🏽. Please take it for a ride and share your feedback. Thanks, all! ---
**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\ **Post date:** [January 22, 2024, 10:22pm UTC](https://forum.pinegrow.com/t/frameworks-lite-for-pinegrow-a-community-plugin-free-open-sourced/8614/10 "2024-01-22T22:22:51Z")
Well, thank you for this @TechAkayy …ive had a look but I must admit …\>I had… NO IDEA what most of this terminology means…islands…hydration…etc I’ve. checked the **Eleventy** site and there is a part there explaining the arcitecture which Ill check out, but is there also other useful info and readable info sites for this sort of topic and, do other newer technologies use this/or similar approaches as obviously the web has moved on… since I last dabbled. So just wondering. Ive heard oif React/Vue etc, but had no need/inclination to overly complicate my learning with technologies and build tools I didnt require and since I have no client missions to meet I could just avoid all that and keep it simple. SO I thought this might be an ok technology youve provided , to tinker with and up my gane but thhen when looking into the basic eleventy stuff, I noticed node and package managers again and I was like _really?_… so yea, when you do some docs with some low level help/instructions (or simply links to already existing good docs to check out) then I’ll explore this great offering. But, ive no idea of the benefits it brings to the talbe yet, but am curious so , if maybe someone could point me to some good use case scenarios or sources fo beginner friendly docs, that would be good. ok cheers. ---
**Author:** ![TechAkayy](https://avatars.discourse-cdn.com/v4/letter/t/ce73a5/32.png) [@TechAkayy](https://forum.pinegrow.com/u/TechAkayy)\ **Post date:** [January 24, 2024, 10:25pm UTC](https://forum.pinegrow.com/t/frameworks-lite-for-pinegrow-a-community-plugin-free-open-sourced/8614/11 "2024-01-24T22:25:42Z")
You have made good points, @schpengle. 🙂 I completely agree with them. This plugin offers more than basic coverage. I’m working on a tutorial to cover the various concepts like islands & partial hydration. Btw, hydration is the process of javascipt (script tag) making the page interactive (carousel, navbars, etc) by setting up the necessary state & event listeners to the html elements. It has always been there, just that some new patterns aimed at increasing performance brought that term into the limelight. Users don’t have to feel pressured or obligated to use all the features. Simply add a Global App (the simplest) and use the props panel to add directives to your markup. Obviously, like other existing CSS frameworks such as Bootstrap and Tailwind, users are expected to be proficient with the activated JS framework (Petite-Vue, Alpine.js, or Standard-Vue) to use it efficiently. ---
**Author:** ![Emmanuel](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/emmanuel/32/6294_2.png) [@Emmanuel](https://forum.pinegrow.com/u/Emmanuel)\ **Post date:** [January 25, 2024, 1:14pm UTC](https://forum.pinegrow.com/t/frameworks-lite-for-pinegrow-a-community-plugin-free-open-sourced/8614/12 "2024-01-25T13:14:54Z")
@schpengle This is a plugin offered to the community by @TechAkayy and which is currently / primarily intended for an informed audience, I mean, an audience that already knows what it’s about and wants to make their life easier by enjoying the benefits of Pinegrow Web Editor. However, I understand that curiosity can arise because novelty is always exciting. In that case, reading the links provided at the beginning seems like an excellent starter to better understand what it’s all about 😉 ---
**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\ **Post date:** [January 25, 2024, 10:39pm UTC](https://forum.pinegrow.com/t/frameworks-lite-for-pinegrow-a-community-plugin-free-open-sourced/8614/13 "2024-01-25T22:39:55Z")
I know, I read the links. bemusing ---
**Author:** ![Emmanuel](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/emmanuel/32/6294_2.png) [@Emmanuel](https://forum.pinegrow.com/u/Emmanuel)\ **Post date:** [January 26, 2024, 10:06am UTC](https://forum.pinegrow.com/t/frameworks-lite-for-pinegrow-a-community-plugin-free-open-sourced/8614/14 "2024-01-26T10:06:57Z")
> [@schpengle](#): > > bemusing I have to admit, this is also ‘bemusing’ for me since Petite Vue and AlpineJS are quite unfamiliar to me! ---
**Author:** ![TechAkayy](https://avatars.discourse-cdn.com/v4/letter/t/ce73a5/32.png) [@TechAkayy](https://forum.pinegrow.com/u/TechAkayy)\ **Post date:** [February 1, 2024, 2:53am UTC](https://forum.pinegrow.com/t/frameworks-lite-for-pinegrow-a-community-plugin-free-open-sourced/8614/15 "2024-02-01T02:53:12Z")
[Frameworks Lite v2.0.0](https://github.com/TechAkayy/frameworks-lite-for-pinegrow) is out now. Here is the release notes. If you want to subscribe to future updates to the plugin, follow this [link](https://github.com/techakayy/frameworks-lite-for-pinegrow#subscribe-for-updates). - Menu labels & helper texts are re-worded, to make them easy to understand. Use the simplest menu options for basic usage. Always refer to framework’s documentation to learn proper usage. - **Delete** action is now moved under a dropdown as “remove” at the end of the directive input field. Only clear icon is the floating one. - **Directives section** is now displayed just above the **Attributes Editor** section so that it’s easy to use both sections together. For eg, to bind an image source to a state variable, - For Alpinejs, replaced jsdelivr cdn links with unpkg ones. - [Not active] When using one of the page templates of a framework, the framework is auto-selected in the `Frameworks` menu. This feature is currently not active as it requires backporting an event `on_file_created_from_master_page` from Vue Designer to Pinegrow. ---
**Author:** ![TechAkayy](https://avatars.discourse-cdn.com/v4/letter/t/ce73a5/32.png) [@TechAkayy](https://forum.pinegrow.com/u/TechAkayy)\ **Post date:** [October 16, 2024, 8:16am UTC](https://forum.pinegrow.com/t/frameworks-lite-for-pinegrow-a-community-plugin-free-open-sourced/8614/16 "2024-10-16T08:16:16Z")
Finally got to publish a short tutorial on Youtube 😀! Please check it out, and share your feedback. [![](https://img.youtube.com/vi/2MwVes_DJSw/maxresdefault.jpg "Progressive Enhacement of HTML with Petite-Vue") ](https://www.youtube.com/watch?v=2MwVes_DJSw) ---
**Author:** ![TechAkayy](https://avatars.discourse-cdn.com/v4/letter/t/ce73a5/32.png) [@TechAkayy](https://forum.pinegrow.com/u/TechAkayy)\ **Post date:** [April 26, 2025, 3:08am UTC](https://forum.pinegrow.com/t/frameworks-lite-for-pinegrow-a-community-plugin-free-open-sourced/8614/17 "2025-04-26T03:08:16Z")
Dear all, v4.00 is out with major refactor and support for HTMX. Please take it for a spin & share your feedback! Download here - [Release v4.0.0 · TechAkayy/frameworks-lite-for-pinegrow · GitHub](https://github.com/techakayy/frameworks-lite-for-pinegrow/releases/latest) ## What’s Changed - Easy to follow workflow, smart default preferences, major code refactor and cleanup - HTMX support (requested by [https://x.com/Tanko\_X/status/1911813131719913558](https://x.com/Tanko_X/status/1911813131719913558)) - TODO: Screenshots in Readme & YouTube tutorial - yet to be updated. ![Pasted Graphic](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/7/719aebedd268bfc709f1ab2adf14c68f64d4c8fe.jpeg) ![Pasted Graphic 2](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/7/7d2db23e19532a4546e2ce7a536adfee57db4ba1.jpeg) ![Pasted Graphic 3](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/d/d56cd9a11b286cfc7e0e3e62b18a98cf0fa0935b.jpeg)