PromptHub
Developer Tools Open Source

Stop Building Landscape Sites by Hand! Use Landscape2 Instead

B

Bright Coding

Author

13 min read
12 views
Stop Building Landscape Sites by Hand! Use Landscape2 Instead

Stop Building Landscape Sites by Hand! Use Landscape2 Instead

What if I told you that teams are burning hundreds of developer hours manually coding interactive ecosystem maps? You've seen them—those beautiful, grid-based visualizations showing the CNCF cloud-native landscape, cybersecurity tools, or AI/ML frameworks. Companies hire frontend engineers, designers, and DevOps specialists just to build and maintain these sites. The cost? Insane. The maintenance nightmare? Worse.

But here's the secret top platform engineers don't want you to know: the CNCF itself open-sourced the exact tool they use. It's called Landscape2, and it transforms static YAML data into production-ready, interactive landscape websites—in seconds, not weeks.

No React components to wire up. No CSS grids to debug. No deployment pipelines to architect from scratch. Just pure, data-driven automation that makes your ecosystem visualization live, searchable, and beautiful.

In this deep dive, I'll expose exactly how Landscape2 works, why it's displacing hand-built solutions, and how you can deploy your first landscape before your coffee gets cold. Let's build something extraordinary.


What is Landscape2?

Landscape2 is a command-line interface (CLI) tool developed by the Cloud Native Computing Foundation (CNCF) that generates interactive, static landscape websites from structured data sources. Born from the need to visualize the explosive growth of cloud-native technologies, Landscape2 powers the iconic CNCF landscape—the same site thousands of developers reference daily to navigate Kubernetes, observability, security, and platform engineering tools.

The project represents a complete architectural evolution from its predecessor. Where older landscape generators required fragile, custom-built infrastructure, Landscape2 embraces a Rust-powered, WASM-enhanced architecture that prioritizes speed, portability, and developer experience. The tool compiles your ecosystem data into a single-page application (SPA) that handles client-side routing, advanced filtering, and responsive design—automatically.

Why is it trending now? Three forces converged:

  • Ecosystem complexity exploded: Every technology domain now has hundreds of tools. Manual curation became impossible.
  • Static site generation matured: The JAMstack movement proved SPAs can be pre-built, cached, and deployed anywhere.
  • CNCF's credibility: When the foundation behind Kubernetes open-sources its own tooling, the industry pays attention.

Landscape2 isn't just for CNCF projects. The landscape2-sites repository reveals adopters across cybersecurity, data platforms, and emerging technology verticals. If you need to map anything—tools, companies, standards, frameworks—this is your weapon of choice.


Key Features That Make Landscape2 Irresistible

Let's dissect what makes this tool technically superior to any hand-rolled alternative:

Declarative Data-Driven Architecture

Your entire landscape lives in YAML files. No database migrations. No API versioning. Just human-readable, version-controllable configuration. The four core data sources are:

  • data.yml — Defines every item: name, category, logo, description, repository URL, and optional external links
  • settings.yml — Controls visual identity: brand colors, featured items, grouping logic, screenshot generation
  • guide.yml — Powers the interactive guide overlay that educates visitors about your ecosystem
  • games.yml — Enables gamification elements to engage your community

This separation of concerns means non-developers can update content while engineers focus on infrastructure.

Intelligent External Data Enrichment

Landscape2 doesn't just display what you give it—it augment your data automatically. Provide GITHUB_TOKENS (comma-separated, with public_repo scope) and the tool fetches stars, contribution activity, and repository metadata. Add a CRUNCHBASE_API_KEY (Enterprise/Application license required) and company funding, acquisition, and employee data materializes.

Critical optimization: For large landscapes, provision multiple GitHub tokens. The tool parallelizes collection based on token count, dramatically reducing build times and dodging rate limits.

WASM-Powered Runtime Overlays

This is where Landscape2 gets wild. The overlay feature lets you apply alternative data sources at runtime via URL parameters—without rebuilding. The tool repackages its Rust core as WebAssembly and re-executes partial builds directly in the browser.

Want to preview a holiday theme? Append ?overlay-settings=https://your-theme.yml. Need to see historical ecosystem snapshots? Swap the data file dynamically. This same WASM module enables embeddable views and iframe integration with automatic resizing.

Production-Ready Static Output

Every build produces a pure static site—HTML, CSS, JS, and optimized assets. Deploy to GitHub Pages, Cloudflare, S3, or any CDN. The SPA routing requires only a simple fallback configuration (serve index.html for unknown paths, or copy it to 404.html for GitHub Pages).

Built-In Validation & CI/CD Integration

The validate subcommand catches schema errors before deployment. The companion landscape2-validate-action enforces data integrity in pull requests, preventing broken landscapes from reaching production.


Real-World Use Cases Where Landscape2 Dominates

1. Cloud-Native Ecosystem Mapping

The original use case and still the most powerful. Whether you're building a Kubernetes-focused landscape or mapping the broader platform engineering ecosystem, Landscape2 handles thousands of items with sub-second search and filtering. The CNCF landscape itself demonstrates this at scale.

2. Cybersecurity Tool Taxonomies

Security vendors proliferate endlessly. CISOs need clear visual taxonomies of detection, response, identity, and cloud security tools. Landscape2's category/subcategory system creates intuitive mental models, while the guide feature educates stakeholders on selection criteria.

3. Open Source Program Offices (OSPOs)

Enterprise OSPOs track hundreds of internal and external dependencies. Landscape2 becomes an internal developer portal—visualizing approved tools, experimental evaluations, and deprecated technologies. The embed feature lets teams integrate views into existing documentation.

4. Technology Due Diligence & Market Maps

Venture capital firms and analyst organizations use Landscape2 to create living market maps. Unlike static PDFs, these update automatically via CI/CD pipelines, always reflecting current GitHub activity and funding data.

5. Conference & Community Showcases

Event organizers map sponsor ecosystems, project pavilions, or community contributions. The games feature adds interactive engagement, while the screenshot generation produces shareable PNG/PDF exports for social media and presentations.


Step-by-Step Installation & Setup Guide

Pre-built Binaries (Fastest Path)

Homebrew (macOS/Linux):

brew install cncf/landscape2/landscape2

Shell script (Linux/macOS):

curl --proto '=https' --tlsv1.2 -LsSf https://github.com/cncf/landscape2/releases/download/v1.1.0/landscape2-installer.sh | sh

PowerShell (Windows):

irm https://github.com/cncf/landscape2/releases/download/v1.1.0/landscape2-installer.ps1 | iex

Container Image (CI/CD & Reproducible Builds)

docker pull ghcr.io/cncf/landscape2:latest

The container is ideal for GitHub Actions workflows—reference the landscape2-sites workflows for production patterns.

Building from Source (Rust Required)

For contributors or those needing bleeding-edge features:

# Install Rust via rustup if needed: https://rustup.rs
# Install wasm-pack: https://rustwasm.github.io/wasm-pack/installer/
# Install yarn: https://classic.yarnpkg.com/lang/en/docs/install/

cargo install --git https://github.com/cncf/landscape2

The build process compiles the Rust CLI, generates WASM modules, bundles the React/TypeScript frontend with yarn, and embeds everything into a single binary. Verify installation:

landscape2 --help

Environment Configuration for Data Enrichment

Add to your shell profile or CI secrets:

# GitHub: comma-separated tokens, public_repo scope required
export GITHUB_TOKENS="ghp_xxxxxxxxxxxx,ghp_yyyyyyyyyyyy"

# Crunchbase: Enterprise or Application license required
export CRUNCHBASE_API_KEY="your-api-key-here"

Without these, builds succeed but omit enriched data—perfect for initial exploration, insufficient for production landscapes.


REAL Code Examples from the Repository

Let's walk through the exact commands from the official README, with detailed explanations of what happens under the hood.

Example 1: Scaffolding a New Landscape

landscape2 new --output-dir my-landscape

What this does: The new subcommand generates a complete starter template in the my-landscape directory. This isn't just empty files—it's a functional mini-landscape with sample data, settings, guide, and placeholder logos. The template demonstrates proper YAML schema structure, saving hours of documentation reading.

Expected output:

INFO new: landscape2::new: creating new landscape from the built-in template..
INFO new: landscape2::new: landscape created! (took: 0.003s)

✅ Landscape created successfully!

You can build it by running the following command from the `my-landscape` directory:

👉 landscape2 build --data-file data.yml --settings-file settings.yml --guide-file guide.yml --logos-path logos --output-dir build

Notice the tool prints your next command automatically—no context switching to documentation. This developer-experience detail separates professional tools from amateur ones.


Example 2: Building the Static Site

cd my-landscape

landscape2 build \
  --data-file data.yml \
  --settings-file settings.yml \
  --guide-file guide.yml \
  --logos-path logos \
  --output-dir build

Critical flags explained:

  • --data-file: The core item definitions. Every tool, company, or project appears here.
  • --settings-file: Visual and behavioral configuration. Colors, featured sections, grouping logic.
  • --guide-file: Educational content overlay. Think "Getting Started" walkthroughs.
  • --logos-path: Directory or base URL containing SVG logos. Every item's logo field references this location.
  • --output-dir: Where the static site lands. This becomes your deployable artifact.

Expected output with warnings (no external credentials):

INFO build: landscape2::build: building landscape website..
WARN build:collect_crunchbase_data: landscape2::build::crunchbase: crunchbase api key not provided: no information will be collected from crunchbase
WARN build:collect_github_data: landscape2::build::github: github tokens not provided: no information will be collected from github
INFO build: landscape2::build: landscape website built! (took: 0.555s)

✅ Landscape built successfully!

You can see it in action by running the following command:

👉 landscape2 serve --landscape-dir build

The WARN entries are informative, not fatal—the build succeeds but lacks enriched data. For production, those warnings should disappear.

Pro tip: The build process attempts automated screenshot generation if configured in settings.yml. This launches Chrome/Chromium headless to capture PNG/PDF exports. No browser installed? The build continues with a warning—graceful degradation done right.


Example 3: Local Preview Server

landscape2 serve --landscape-dir build

Output:

INFO serve: landscape2::serve: http server running (press ctrl+c to stop)

🔗 Landscape available at: http://127.0.0.1:8000

The built-in server handles SPA routing automatically—requests to /guide, /stats, or any client-side route serve index.html correctly. This eliminates the #1 deployment pitfall of static SPAs.

Production deployment note: When hosting in a subpath (e.g., example.com/landscape), set base_path: "/landscape" in settings.yml. For GitHub Pages, copy index.html to 404.html to leverage GitHub's automatic 404 serving for unknown routes.


Example 4: Validation in CI/CD

landscape2 validate settings --settings-file cncf/settings.yml

Sample error output:

Error: the landscape settings file provided is not valid

Caused by:
    0: the landscape settings file provided is not valid
    1: color1 is not valid (expected format: "rgba(0, 107, 204, 1)")

This catches schema violations before they break production builds. Integrate via the landscape2-validate-action for automated PR checks.


Advanced Usage & Best Practices

Performance Optimization: Cache Everything

External data collection and logo processing dominate build times. Landscape2 caches aggressively, but you must persist the cache directory between CI runs:

landscape2 build --cache-dir .landscape-cache [other flags]

In GitHub Actions, use actions/cache to restore .landscape-cache. The landscape2-sites workflows demonstrate exact implementations.

Multi-Token GitHub Strategy

For landscapes with 500+ items, single GitHub tokens hit rate limits. Provision 3-5 tokens and Landscape2 automatically parallelizes collection:

export GITHUB_TOKENS="ghp_token1,ghp_token2,ghp_token3,ghp_token4,ghp_token5"

Concurrency scales linearly with token count—this is legitimate, GitHub-approved usage.

Embeddable Views for Ecosystem Growth

Drive adoption by letting partners embed filtered views of your landscape. Visit /embed-setup on any deployed landscape (e.g., landscape.cncf.io/embed-setup) to generate customized iframe code. Enable responsive sizing with iframe-resizer=true:

<iframe src="https://your.landscape/embed?category=security&iframe-resizer=true"></iframe>

Overlay for A/B Testing & Previews

The overlay feature enables zero-deployment previews. Share URLs like:

https://landscape.cncf.io/?overlay-settings=https://raw.githubusercontent.com/user/repo/new-theme.yml

Stakeholders review visual changes instantly. The WASM module rebuilds the landscape client-side using your alternate configuration—no server resources consumed.


Comparison with Alternatives

Feature Landscape2 Hand-Built React Docusaurus + Custom Static Site Generators
Setup Time 5 minutes 40+ hours 20+ hours 15+ hours
YAML-Driven Content ✅ Native ❌ Manual implementation ❌ Requires plugins ❌ Requires custom integration
External Data Enrichment ✅ GitHub + Crunchbase auto ❌ Manual API integration ❌ Manual API integration ❌ Manual API integration
SPA + Client Routing ✅ Built-in ❌ Manual React Router setup ❌ Not designed for this ❌ Usually SSR-focused
Embeddable Views ✅ Native /embed-setup ❌ Complex iframe management ❌ Not applicable ❌ Not applicable
Runtime Overlays (WASM) ✅ Unique feature ❌ Impossible without rebuild ❌ Impossible without rebuild ❌ Impossible without rebuild
CNCF Maintenance ✅ Production-proven N/A N/A N/A
CI/CD Validation validate subcommand + Action ❌ Custom testing required ❌ Limited ❌ Limited

The verdict: Hand-built solutions offer maximum customization but impose massive maintenance burden. Landscape2 trades some flexibility for dramatic productivity gains and production reliability. For 95% of ecosystem visualization needs, it's the optimal choice.


FAQ: Common Developer Concerns

Q: Can I use Landscape2 for non-technology ecosystems?

Absolutely. While optimized for software tools, any hierarchical categorization works—academic programs, healthcare services, sustainability initiatives. The data model is generic: items, categories, subcategories, and metadata.

Q: Is Landscape2 only for CNCF projects?

No. The CNCF develops and uses it, but it's Apache 2.0 licensed for anyone. The ADOPTERS.md lists independent organizations using it successfully.

Q: Do I need Rust knowledge to use Landscape2?

Zero Rust required for usage. Only contributors building from source need Rust toolchain familiarity. Pre-built binaries and containers handle everything.

Q: How do I handle logos that aren't SVG?

Landscape2 requires SVG logos. Convert PNG/JPEG assets using tools like Inkscape, Adobe Illustrator, or online converters. The SVG requirement ensures crisp rendering at all resolutions and small file sizes.

Q: Can I customize the visual design extensively?

Yes, via settings.yml—colors, fonts, layout density, and featured item highlighting are configurable. For deeper customization, fork the repository and modify the React/TypeScript frontend source, then rebuild.

Q: What hosting works best for Landscape2 outputs?

Any static host: GitHub Pages, Netlify, Vercel, Cloudflare Pages, AWS S3 + CloudFront. The SPA routing requirement (fallback to index.html) is the only consideration.

Q: How does the Crunchbase integration work with licensing?

Crunchbase's full API requires an Enterprise or Application license. The free tier doesn't provide sufficient data. Without a valid key, builds succeed but omit company metadata—functionally fine for many use cases.


Conclusion: Your Ecosystem Deserves Better Than Manual Labor

Here's the uncomfortable truth: every hour spent hand-coding landscape visualizations is an hour not spent on your core product. Landscape2 obliterates this opportunity cost by transforming ecosystem mapping from a bespoke engineering project into a declarative, automated workflow.

The CNCF didn't build this for charity—they built it because their own landscape had become unmaintainable without automation. Now that same tooling powers their iconic visualization, and it's yours for the taking.

Start today. Run landscape2 new, point it at your data, and witness your ecosystem come alive in under a minute. The future of technical visualization isn't more JavaScript frameworks—it's intelligent tools that understand what developers actually need.

Ready to stop building landscapes by hand?

👉 Explore Landscape2 on GitHub — star the repository, read the docs, and join the growing community of teams who've escaped manual ecosystem mapping forever.

Your stakeholders will thank you. Your engineering budget will thank you. Most importantly, you'll finally have time to build what actually matters.

Comments (0)

Comments are moderated before appearing.

No comments yet. Be the first to share your thoughts!

Support us! ☕