PHPackages andchir/twig-visual - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Templating & Views](/categories/templating) 4. / 5. andchir/twig-visual ActiveLibrary[Templating & Views](/categories/templating) andchir/twig-visual =================== v1.0.2(5y ago)11001[6 PRs](https://github.com/andchir/twig-visual/pulls)MITPHP Since May 31Pushed 3y ago1 watchersCompare [ Source](https://github.com/andchir/twig-visual)[ Packagist](https://packagist.org/packages/andchir/twig-visual)[ RSS](/packages/andchir-twig-visual/feed)WikiDiscussions master Synced 5d ago READMEChangelog (3)Dependencies (2)Versions (11)Used By (0) TwigVisual ---------- [](#twigvisual) Bundle for [Symfony](https://symfony.com/) 5+. Menu, breadcrumbs, list of pages, shopping cart ... - all this can be done dynamically in the visual mode, without having to dive into code and study the documentation. The application can be adapted for other template engines and CMS, the main settings are in one YAML file. ``` composer require andchir/twig-visual ``` Video: [![TwigVisual - screenshot #1](https://github.com/andchir/twig-visual/raw/master/src/Resources/public/screenshots/001.png?raw=true "TwigVisual - screenshot #1")](https://github.com/andchir/twig-visual/blob/master/src/Resources/public/screenshots/001.png?raw=true) Configuration example: ``` twig_visual: default_copy: [] templates: - homepage cache_location: [] templates_extension: html.twig file_upload_dir_path: '%kernel.project_dir%/public/uploads' editor_user_role: 'ROLE_ADMIN_WRITE' ui: field: title: Content field configuration: saveBackupCopy: true components: root: title: Root element type: elementSelect required: true template: '{%% if {{ fieldName }} is defined %%}{{ {{ fieldName }} }}{%% endif %%}' fieldName: title: Content field type: pageField join: key separator: '.' key: title: Value key type: text includeCreate: title: Make included configuration: saveBackupCopy: true components: root: title: Root element type: elementSelect required: true includeName: title: Item name type: text required: true include: title: Replace with included configuration: updateIncludeSource: false saveBackupCopy: true components: root: title: Root element type: elementSelect required: true includeName: title: Include name type: include required: true menu: title: Main menu configuration: saveBackupCopy: true components: root: title: Root element type: elementSelect required: true output: "{{ categoriesTree(0, 'menu_dropdown{{ nameSuffix }}', null, activeCategoriesIds, false) }}" template: '' templatePath: nav/menu_dropdown saveBackupCopy: true itemFirst: title: First level menu item type: elementSelect isChildItem: true required: true output: '' template: | {%% for category in children %%} {{ category.title }} {%% endfor %%} containerSecond: title: Second level container type: elementSelect output: "{{ categoriesTree(category.id, 'menu_dropdown_child{{ nameSuffix }}', category, activeCategoriesIds, false) }}" template: '' templatePath: nav/menu_dropdown_child itemSecond: title: Second level menu item type: elementSelect isChildItem: true output: '' template: | {%% for category in children %%} {{ category.title }} {%% endfor %%} containerThird: title: Third level container type: elementSelect output: "{{ categoriesTree(category.id, 'menu_dropdown_child', category, activeCategoriesIds, false) }}" template: '' templatePath: nav/menu_dropdown_child_child itemThird: title: Third level menu item type: elementSelect isChildItem: true output: '' template: | {%% for category in children %%} {{ category.title }} {%% endfor %%} activeClassName: {title: CSS activity class, type: text, value: active} nameSuffix: {title: Name suffix, type: text} deleteLeftSiblings: {title: Delete previous child, type: checkbox} deleteRightSiblings: {title: Delete next child, type: checkbox} editMargin: title: Edit margin configuration: saveBackupCopy: true components: root: title: Root element type: elementSelect required: true marginTop: title: Indent on the top type: text styleName: 'margin-top' marginRight: title: Indent on the right type: text styleName: 'margin-right' marginBottom: title: Indent from the bottom type: text styleName: 'margin-bottom' marginLeft: title: Indent on the left type: text styleName: 'margin-left' editPadding: title: Edit padding configuration: saveBackupCopy: true components: root: title: Root element type: elementSelect required: true paddingTop: title: Indent on the top type: text styleName: 'padding-top' paddingRight: title: Indent on the right type: text styleName: 'padding-right' paddingBottom: title: Indent from the bottom type: text styleName: 'padding-bottom' paddingLeft: title: Indent on the left type: text styleName: 'padding-left' wrapTag: title: Create block configuration: saveBackupCopy: true components: root: title: Root element type: elementSelect required: true output: '' template: '' ``` Add to base template before `` tag: ``` {% if is_granted('ROLE_ADMIN') %} const twigVisual = new TwigVisual( {{ twigVisualOptions(_self, _context) }} ); {% endif %} ``` Development: ``` npm run build:dev ``` Production: ``` npm run build ``` ### Health Score 29 — LowBetter than 59% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity12 Limited adoption so far Community10 Small or concentrated contributor base Maturity62 Established project with proven stability Bus Factor1 Top contributor holds 89.4% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~0 days Total 3 Last Release 2176d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/6392311?v=4)[Andrei](/maintainers/andchir)[@andchir](https://github.com/andchir) --- Top Contributors [![andchir](https://avatars.githubusercontent.com/u/6392311?v=4)](https://github.com/andchir "andchir (152 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (18 commits)") --- Tags twigvisual editoredit template ### Embed Badge ![Health badge](/badges/andchir-twig-visual/health.svg) ``` [![Health](https://phpackages.com/badges/andchir-twig-visual/health.svg)](https://phpackages.com/packages/andchir-twig-visual) ``` ### Alternatives [twig/extra-bundle A Symfony bundle for extra Twig extensions 91292.0M315](/packages/twig-extra-bundle)[twig/intl-extra A Twig extension for Intl 36663.2M221](/packages/twig-intl-extra)[twig/string-extra A Twig extension for Symfony String 21946.0M133](/packages/twig-string-extra)[twig/cssinliner-extra A Twig extension to allow inlining CSS 23018.5M55](/packages/twig-cssinliner-extra)[symfony/ux-twig-component Twig components for Symfony 21814.8M162](/packages/symfony-ux-twig-component)[twig/markdown-extra A Twig extension for Markdown 12114.3M83](/packages/twig-markdown-extra) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)