jploch

@AndZyk I know I can look them up, but it would ne nicer to have them in the backend directly without opening a new page. Since we use them so much in the backend, I think it's worth it.

@ryan Great update! I really love the updated icons in the backend! One issue I have with the current implementation is that we’re missing the grid view from before. I know there are a lot more icons now, but the grid view would still be helpful. With the new update, you always have to type something into the search bar first, but often I am browsing for a specific icon visually, before knowing the name. Another option would be a custom seletct that shows the icons before the text.

New Figma to PageGrid Importer From design to production in no time, with the new Figma to PageGrid Importer. At our studio, Konkat, we do all our design work in Figma because it lets us move and iterate quickly alongside our clients. While AI is great at spinning up generic, cookie-cutter layouts, true professional value lies in creating websites genuinely custom-tailored to a client. For that level of work, pure text prompts simply don’t offer the layout precision you need—writing a description will never match the intuitive control of direct visual input. But as any developer here knows, turning a finished design into a live, client-editable website usually requires a lot of manual layout replication before you can get to the core development. Even though PageGrid is already a massive speed upgrade, manually recreating a canvas layout element-by-element is still a time-consuming assembly phase. It eats up hours better spent on deep development, custom logic, and polished execution. That’s exactly why I (with the help of Claude Code) built the new Figma Exporter plugin and a native PageGrid Importer module for ProcessWire. It compresses hours of manual layout replication into a five-second automated import. By handling the structural translation instantly, it lets you skip the repetitive setup entirely and jump straight into the fun stuff: custom animations, fine-tuning, and high-level development. Instead of just telling you what it does, I want to be completely transparent about how it was built, why we intentionally avoided a "live AI" generation solution, and how it changed my perspective on building dev tools. Why We Rejected Live AI Generation When I started working on this, my first instinct was to leverage the power of AI agents directly during the import process. I tried using Claude via a live Model Context Protocol (MCP) setup to directly read my active Figma canvas and dynamically generate the PageGrid layout on the fly. Honestly, AI is surprisingly good at understanding how to build a layout in PageGrid now, and the initial results were already incredibly close to the original Figma designs. Using MCP is a really interesting alternative, but for daily production work, relying on a live AI connection just didn't make sense for a few major reasons: It was unpredictable: Every single time I ran the generation on the exact same layout, the resulting code structure came back slightly different. It was slow: Relying on live AI cloud prompts meant waiting for the model to think, stream, and process the data. API Bottlenecks: The live Figma API connections generated far too many requests, causing frequent rate-limiting issues. Resource-heavy: Each time we want to create a new layout we have to prompt an AI, which uses extra computing power and adds up in ongoing token costs. At our agency, Konkat, we built PageGrid to power actual production sites for our clients. We plan to use these tools daily to optimize our own studio workflow. In a professional production pipeline, an unpredictable guessing game that changes its behavior on every prompt simply isn't an option. We needed something that was completely deterministic, blazing fast, and independent of live external APIs. So, we changed our strategy entirely. Changing the Strategy: AI as the Engineer, Not the Runtime Since Claude had become deeply familiar with the Figma API, and thoroughly understood the structure of ProcessWire and PageGrid, I stopped trying to use the AI to generate layouts on the fly. Instead, I partnered with Claude to write a dedicated, local compiler. Claude acted as my co-developer. Together, we built a simple, two-part ecosystem: A local Figma Exporter Plugin that reads the canvas instantly and packages the architectural structure and assets into a lightweight .ZIP file. A native ProcessWire Importer Module that unzips that package and handles the rendering locally on your server. Because the final tool runs entirely on pure, local code logic, it requires zero active AI API calls, runs instantly, and produces the exact same, predictable structure every single time. Respecting Layout Intent Without Forcing "Auto Layout" Most Figma-to-code plugins fail unless you have meticulously built your file using strict, perfectly nested Auto Layout components. If you design loosely, those plugins break or output absolute-positioned spaghetti code that is impossible to maintain. As a designer, I know that forcing strict Auto Layout workflows during the rapid, creative prototyping phase can feel incredibly restrictive. That’s why we engineered our importer to give you complete freedom to design your way. Whether you prefer nesting elements using strict Auto Layout, arranging them freely using Figma's native Column Layout Guides, or using a mix of both, the compiler adapts to your workflow. When you run the importer, PageGrid respects your structural intent and translates it into standard web architecture: Native CSS Grid & Flexbox: Elements aligned to your column guides are automatically mapped to precise, responsive CSS Grid positions, while Auto Layout frames are translated cleanly into semantic Flexbox structures. Direct Layer Mapping & Smart Flattening: The importer replicates your Figma layer structure directly in PageGrid by mapping all layer nodes straight to native PageGrid Blocks like pg_group (groups), pg_image (images), and pg_editor (text). At the same time, the parser automatically filters the tree, flattening out any unnecessary deep nesting or arbitrary wrappers when needed so your backend tree stays incredibly clean. Maps Figma API to Modern CSS: It natively extracts typography styles, colors, borders, spacing rules, and effects, turning them directly into clean PageGrid metadata or copyable CSS. 💡 The "Grouping" Pro-Tip: Because Figma group nodes map directly to pg_group container blocks, grouping items that belong together directly shapes your PageGrid backend structure. While the importer can handle ungrouped layers, grouping your elements ensures the highest layout accuracy and keeps complex structures beautifully organized under the hood. Keeping You in the Driver's Seat When the import finishes, you are not left with a static image or a fragile webpage that breaks the moment you edit a line of text. You get a native, fully editable ProcessWire page built out of organized PageGrid blocks. Because PageGrid functions like a precise web canvas, the layout remains rock-solid. Your clients can easily log in to update text and images directly on the live page, but they will never accidentally break the structural layout you designed. The mechanical translation work is completed in five seconds. From there, you take over to do the work that humans do best: adding fine-tuned interactions, implementing custom animations, and binding dynamic backend data fields. How to Try It You don't need a paid plan to use it—the plugin works perfectly on the free version of Figma. Here is how to get started: Get the Figma Plugin: Open the Figma to PageGrid Exporter in Figma. Select your main design frame and download your .ZIP package. Install the Importer Module (Self-Hosted Only): Add the PageGridFigmaImport module to your ProcessWire backend. Upload & Run: Go to Setup > Figma to PageGrid, drop in your file, and watch your layout appear natively. Documentation: Figma Import Documentation. I consider this a beta launch, not every generated layout will be perfect out of the box, but results so far have been quite impressive. I plan to improve this over time. Give it a try and let me know what you think!

Some additional thoughts on using AI for PAGEGRID development: https://page-grid.com/blog/ai-as-a-tool-not-a-replacement/

Working with AI in PageGrid Inspired by projects like AgentTools, I began investigating how well an AI could handle PageGrid’s native PW structure (Pages, Templates, and Fields). The results were surprisingly good and with a few targeted optimizations, the workflow has become remarkably solid. With the latest updates, an AI agent is reliably able to create and design PageGrid layouts, create new block templates, or perform content updates. To teach AI how to "speak PageGrid", I created a small AGENTS.md file that acts as a central hub. I’ve then added specific "skills" in separate .md files for various tasks ensuring the AI only loads the documentation it actually needs. This approach is highly optimized to minimize token consumption, allowing even "smaller" models like GPT-4o mini or Claude Haiku to produce error-free migrations. To make this possible, I also introduced dedicated Migration Functions that allow the AI to programmatically add items or set styles. For CLI-based projects, I highly recommend the AgentTools Module to streamline the integration. Beyond CLI support, AgentTools also provides a native AI interface directly within the ProcessWire backend editor. Getting Started Install the lastest version of the FieldtypePageGrid module (try for free). Tell your AI agent to read the PageGrid agent guide first: That file gives the agent everything it needs to understand PageGrid and routes it to the right documentation for your task. What You Can Ask the AI to Do Build or modify a layout Create pages with blocks, apply styles, set up responsive layouts using CSS grid columns. Example prompts: "Create a landing page with a full-width hero section and a 3-column feature grid below it." "Add a text block and an image block side by side inside the first group on my homepage." "Make the hero block have a dark background and white text, with 60px padding on desktop and 24px on mobile." The core advantage here is that the AI doesn't write your frontend code from scratch. The HTML and logic are already defined in your PageGrid Block Templates. The AI simply acts as an orchestrator, assembling these blocks and applying styles. This ensures the output remains clean, semantic, and easy to maintain via drag-and-drop later on. Create a custom block template Define a new block type with custom fields and register it with a PageGrid field. Example prompts: "Create a custom block called pg_testimonial with a quote text field and an author name field." "Create a custom card block with a title, description, and link field, and add it to my homepage PageGrid field." Write a site template Render a PageGrid field inside your own PHP template file. Example prompts: "Show me how to render my PageGrid field inside my home.php template using markup regions." "Generate a site template for pagegrid-page that includes the PageGrid output between the header and footer." Docs Documentaion

I feel the same way when things I'm used to change. E.g. the switch from XD to Figma a few years ago felt unfamiliar at first and it slowed me down. Mainly because I had a lot of things stored in my head that turned out to be different. Now it's the other way around and I could never go back to working with XD. I was also pissed at apple when they updated the OS to use the new Liquid Glass design system, now everyone seems to love it and designers copy it (still not the biggest fan, but I can live with it now) 🙂. I hope the new theme will grow on people. The simpler color scheme (compared to the original Uikit theme) and CSS variables make theming much easier. You can quite easiely customise it to your taste if you don't like the defaults. And it shares some concepts with AdminThemeCanvas like the fixed header and a more minimal modern aesthetic that fit very well for a web app like PW in my opnion. I am using the Konkat theme for all my new projects. @diogo has already sent detailed documentation for the Konkat theme to Ryan, which he will hopefully publish on the site soon. The new docs are especially interesting for module developers. @maximus has also done a great job with the style system guide. I think that will also help demonstrate the benefits of the new theming system. The theme now also supports UIkit components out of the box. We will have to wait a bit for Ryan to decide where those docs will be published. AdminTheme Canvas has served me well for many years, and I’m glad so many of you have used it! If anyone wants to take it over, feel free to send me a DM. But I think it’s better to use the core theme as a replacement.

DEPRECATED: I am no longer supporting AdminThemeCanvas. Now that the new native KONKAT theme is part of the ProcessWire core, this module is largely redundant. Thanks to everyone who used and supported it!. This repository will remain available for legacy projects but will not receive further updates. To make the KONKAT theme behave more like this one you can install the AdminQuickTree module, which gives you direct access to the page tree navigation.

The toughest challenge so far? Being our own client. Actually, the website we launched back then was just a placeholder, and the plan was to quickly replace it with a proper portfolio website. But as is often the case, it ended up taking a little longer than expected. A year later, we’ve finally done it: Our new website is live! https://konkat.studio/ The goal of the new website is to showcase our work and better communicate our services. The site is bilingual and was built using ProcessWire and PageGrid. More on that later. In addition to the website, we’ve also evolved our visual identity and logo. KONKAT (from concatenation) stands for linking individual elements into a functional whole. Our new branding makes this connection visible. In our case, we combine strategy, design, and technology into a unified process. The logo mark communicates this as well; as most of you probably know, the += operator in JavaScript joins elements and assigns the result. It took us some iterations to get the design right, but once the design was done, development was pretty straightforward. Most of the time was spent preparing the content for the projects, and that is also where PageGrid was super useful since it allowed us to design the layout and content of each project individually. Backend view: Managing project content and layouts with PageGrid. PageGrid also significantly sped up development, as we built all other pages using only its core blocks. For the projects overview, for instance, we used the datalist block to automatically generate the listing from our project pages, working perfectly out of the box without any custom logic. We also added some custom code where it made sense, e.g. the scroll animation on the homepage was just a bit easier to achieve with custom code (it uses native CSS sticky). Backend view: Using Pagegrid's inline editing to update some text on the english version auf our services page. Another great thing is that PageGrid takes care of lazy loading images and videos (using the famous lazysizes js plugin) and is caching its content automatically. As a result, we got a 100 on the Google Lighthouse test on desktop and 99 on mobile without any extra optimizations (we are not using Markup Cache or ProCache for this site). Backend view: Editing a thumbnail on the homepage If you have any further questions regarding our workflow or process, feel free to ask. I will do my best to answer them. Also, please let us know if you find any bugs, since the website is brand new, there are probably some we haven't caught yet! We also welcome any feedback you may have. Best, Jan & Diogo (KONKAT)

If you just want to sync the fields and templates you can also try the native fields/templates export/import. For most fields this works quite well. Thats how I usually do it. Sometimes I also do it the other way around and import all the pages that have changed from production to local with the native page export/import and than export the whole database (using ProcessDatabaseBackups module) from local and import that on the production site. RockMigrations is also great and I have used it for more complex stuff. One thing I did not find in RockMigrations is the option to migrate pages. Can that also be done?

Hi ausblick, I'm happy to answer your questions. Basically, these are topics that for the most part don't specifically concern PAGEGRID, but rather ProcessWire in general. In ProcessWire, site profiles are essentially preconfigured starting points for a new site. They define the structure, templates, fields, and sometimes demo content that get installed when you first set up ProcessWire. Unlike themes in WordPress, which can be changed later, site profiles are installed together with ProcessWire when you first setup the site and can't be changed later. PAGEGRID supports the creation of site profiles, and there are currently two smaller PAGEGRID profiles that can be installed (click the thumbnail to see the frontend). However, these are currently only available in PAGEGRID Cloud. If you want to try them quickly, you can create a free cloud account. Cloud sites can then also be exported as a site profile (with a self-hosting license). But I can also upload them here as ZIP archives if you prefere. For my projects I usually don't use site profiles. Since PAGEGRID allows you to install pre-built blocks (which create all the templates and fields for you), it's already a good starting point for a new website. All you have to do is add the blocks you want to your page and design them using the style panel (visually) or with CSS code. Since my websites usually look very different from each other, I prefer blocks that are largely unstyled by default. Yes. Procache works with PAGEGRID. But it is not really needed since PAGEGRID is already using markup cache for all it's output. If you build a site that is mostly rendered through PAGEGRID it will be very fast out of the box, without any additional customisation. E.g. page-grid.com which is build with PAGEGRID has a performance score of 100 (best score) in Google lighthouse speed test and is not using any additional caching. First you have to add a PAGEGRID field to your home template inside the admin. Then open the file home.php inside your site/templates folder and add the following lines: <div id="content"> <?= $pagegrid->styles($page); ?> <?= $pagegrid->renderGrid($page); ?> <?= $pagegrid->scripts($page); ?> </div> Note in this example I am using the blank site profile and markup regions are enabled. The #content div in this file will replace the #content div in _main.php See the Markup Regions documentation for more information.

PAGEGRID makes no assumptions about CSS or markup. This means that all CSS frameworks also work with PAGEGRID. I don't work with CSS frameworks myself, so I can't really recommend any (I prefer to use modern vanilla CSS like variables, grid, etc.). But I think it's totally fine to use them. I don't think it will have big impact on performance (depending on how large the CSS file for the framework is), just make sure to load your CSS fraemwork files inside the <head> tag so it's not blocking the rendering of your page. There are basically two approaches to working with PAGEGRID, but these can also be combined: No-code approach: You can create entire websites with PAGEGRID without writing any code yourself. To do this, you can use the “Ready-Made Blocks” and create CSS classes and styles with the Style Panel. This works similarly to Webflow or Figma and is particularly interesting for people who want to customize their website visually (which can be faster then doing it in code). Code only: If you prefer to work in code, you can disable the Style Panel in the PAGEGRID settings (Setup > PAGEGRID). You can then use any CSS framework with PAGEGRID. If you want to use your own CSS code or a framework, you can load it into your page template (take a look at the pagegrid-page.php template as an example). If you want to create your own blocks, you can copy the ready-made blocks from “site/modules/PageGridBlocks/blocks” to your “site/templates/blocks” folder and customize the markup there (e.g., add classes and markup for your CSS framework), or create your blocks from scratch. Learn more here: How do I create my own blocks? or here: how styles work in PAGEGRID. Here is an example of an accordion block using the UIkit framework as an example: <?php namespace ProcessWire; ?> <!-- UIkit accordion block using PAGEGRID's children option --> <ul uk-accordion pg-children="true" pg-children-label="Accordion Items" pg-children-tab="append" pg-autotitle="false" pg-wrapper> <?php foreach ($page->children() as $item) : ?> <li> <a class="uk-accordion-title" href><?= $item->title ?></a> <div class="uk-accordion-content"><?= $pagegrid->renderItem($item) ?></div> </li> <?php endforeach ?> </ul> In this example we use PAGEGRID's children option to render the accordion items (as child pages). Users can then add child items using the backend editor. You could also use repeaters to render the child items for PAGEGRID. The point here is that you can easily add whatever markup is neede for your CSS framework by creating your own custom blocks.

Unfortunately, only my PageGridBlocks are available so far. But it would be nice if the community created and shared their own blocks as well. My PageGridBlocks module makes it easy to install and uninstall block templates. It could be a good starting point for others. Another good option would be Bernhard's RockMigrations module to create the block templates. I think it would be best if those blocks would be installable as modules. It would be cool, for example, if someone created blocks for a specific CSS framework. Since I don't work with frameworks myself, this isn't particularly useful for me. However, there seem to be many people in the PW community who work with frameworks. If someone were willing to create and share their own block library, I would be happy to grant that person free access to PAGEGRID.

AdminQuickTree This module is great for productivity when editing many pages within the admin, as it gives you direct access to the page tree navigation without having to hover the tree icon first. Download from Github Donwload fom Module Directory For non-superusers the page dropdown currently looks like this (if no bookmarks are defined): With this module it looks like this: For super-users or users with all permissions set it looks like this: These changes are achieved width a small js file that triggers the ajax tree navigation after the dom has been loaded. While I have tested it already a bit, I release this for now as a beta version. I hope others find it useful as well.

I think we need both. Clients usually ask what CMS the developer uses and more often then not visits the website. So the website should also help the developer to convince the client.

We are still targeting developers. But we are trying to be more accessible. Many of us where not trained developers when we started to use PW. And programming can feel intimidating. For example Diogo and I where designers and then became developers when we discovered PW. The great thing about PW is that it’s relatively easy for beginners to get started. Even with little coding experience. I think it’s not a bad idea to make PW approachable for more users.