erdnaxelaweb/staticfakedesign
StaticFakeDesign is a Symfony bundle that generates realistic fake data and static HTML/CSS/JS for UI prototyping. Declare reusable components with typed parameters, preview them in a built-in showroom, and render static template versions—saving designers and developers time before the backend is bu...
The core purpose of this bundle is to generate realistic-looking static HTML/CSS/JS based on fake data.
It aims to save developers and designers time by providing a visual representation of their application with placeholder content, even before the backend is fully built by providing tools to:
StaticFakeDesignBundle is a Symfony bundle designed to streamline the development of UI components and templates with auto-generated fake data. It bridges the gap between design and development by providing tools to:
This bundle is particularly useful for frontend development, to streamline the development of UI components and templates.
composer require erdnaxelaweb/staticfakedesign:dev-main
return [
// ...
ErdnaxelaWeb\StaticFakeDesignBundle\StaticFakeDesignBundle::class => ['all' => true],
];
The bundle provides a powerful system for generating fake variables that mimic real data. This allows you to develop UI components with realistic data structures before your backend is fully implemented.
Create reusable, self-documenting UI components with typed parameters, making your frontend development more structured and maintainable.
The bundle provides a "showroom" interface which allows you to navigate and display the components you have created. This makes it easy to test and demonstrate your UI components in isolation.
To access this interface on the URL /showroom, add the following route configuration:
# config/routes.yaml
showroom:
resource: "@StaticFakeDesignBundle/Resources/config/routing/showroom.yaml"
The bundle allows you to create static versions of your templates for demonstration purposes. To access these examples at /static/{path to template}, add the following route:
# config/routes.yaml
static:
path: /static/{path}
controller: ErdnaxelaWeb\StaticFakeDesignBundle\Controller\StaticController::viewAction
requirements:
path: .*
There are three ways to use fake generated variables:
Twig comment:
{# @fake variable_name value_type #}
More information on fake variables
Twig template declared as component:
{% component {
name: 'Component name',
specifications: 'Optional link to the component specification',
description: 'Optional component description',
properties: {
display_summary: {
label: 'Display the summary',
type: 'boolean',
required: false,
default: true
},
// Other properties...
},
parameters: {
title: {
label: 'Title',
type: 'string',
required: true,
default: 'Default title'
},
// Other parameters...
}
} %}
More information on component declaration
Use the ErdnaxelaWeb\StaticFakeDesign\Fake\ChainGenerator service to programmatically generate fake data in your controllers or services:
// Example usage in a controller
public function exampleAction(ChainGenerator $fakeGenerator)
{
$fakeArticle = $fakeGenerator->generate('content', ['type' => 'article']);
return $this->render('example.html.twig', [
'article' => $fakeArticle
]);
}
The bundle provides support for generating complex value objects commonly used in CMS and web applications:
These objects are managed through the concept of "definitions". These definitions are specifications that allow the bundle to generate thoses complex, structured data.
Content definitions specify the structure of content objects:
# config/packages/static_fake_design.yaml
erdnaxelaweb.static_fake_design.content_definition:
article:
models:
-
name: "First article model"
image: "article1.jpg"
-
name: "Second article model"
image: "article2.jpg"
fields:
title:
required: true
type: string
body:
required: true
type: richtext
image:
required: false
type: image
related_articles:
required: false
type: content
options:
type: "article"
max: 3
Taxonomy entries follow a similar definition pattern:
# config/packages/static_fake_design.yaml
erdnaxelaweb.static_fake_design.taxonomy_entry_definition:
category:
fields:
name:
required: true
type: string
description:
required: false
type: text
icon:
required: false
type: string
Pagers are configured with content types, filters, and sorting options:
# config/packages/static_fake_design.yaml
erdnaxelaweb.static_fake_design.pager_definition:
articles:
contentTypes: ["article"]
filters:
category:
type: checkbox
date:
type: date_range
maxPerPage: 10
headlineCount: 3
sorts:
publish_date:
type: publish_date
Blocks are configured with views, attributes, and optional models:
# config/packages/static_fake_design.yaml
erdnaxelaweb.static_fake_design.block_definition:
hero:
views:
default: "blocks/hero/default.html.twig"
centered: "blocks/hero/centered.html.twig"
attributes:
title:
required: true
type: string
subtitle:
required: false
type: string
background_image:
required: true
type: image
Block layouts group blocks together by sections:
# config/packages/static_fake_design.yaml
erdnaxelaweb.static_fake_design.block_layout_definition:
landing_page:
sections:
header:
max: 1
blocks: ["hero"]
content:
blocks: ["text", "image_text", "gallery"]
sidebar:
blocks: ["cta", "related_content"]
For more detailed documentation on specific features:
Contributions are welcome! Please feel free to submit a Pull Request.
composer create-project symfony/skeleton:"7.4.*" web
cd web
composer config repositories.staticfakedesign '{"type": "path", "url": "../", "options": {"symlink": true}}' --json
composer require erdnaxelaweb/staticfakedesign:dev-main
yarn install --cwd ../
cp ../doc/example/* ./ -R
then go to https://staticfakedesign.ddev.site/showroom
This bundle is released under the MIT License.
How can I help you explore Laravel packages today?