How Webstacks Crafted a New Content Marketing Era for Semgrep

Read on to learn how Webstacks collaborates with Semgrep to build immersive web experiences to elevate its product and content marketing.

How Webstacks Crafted a New Content Marketing Era for SemgrepHow Webstacks Crafted a New Content Marketing Era for Semgrep

Read on to learn how Webstacks collaborates with Semgrep to build immersive web experiences to elevate its product and content marketing.

Who is Semgrep?

Semgrep is a cutting-edge static analysis tool designed to streamline code security and quality by identifying bugs, vulnerabilities, and enforcing code standards swiftly and effectively.

With a unique approach, Semgrep blends the convenience of grep with the depth of semantic analysis to understand code's nuances. Semgrep supports a wide range of programming languages and integrates seamlessly into development workflows, offering real-time feedback without hindering productivity.

Its open-source engine, complemented by a comprehensive rule library and continuous integration services, makes it accessible for both individual developers and teams, ensuring code security without the complexity often associated with similar tools​​​​​​.

In our collaboration with Semgrep, a pivotal moment was its strategic rebranding from its original iteration under r2c, signifying not just a change in name but a substantial leap in its capabilities and mission. 

This evolution marked a transition towards a more sophisticated, comprehensive tool for static code analysis, deeply aligning with our commitment to enhancing security and efficiency in software development

Semgrep came to Webstacks at this pivotal change in their organization. We were tasked with delivering a fresh, scalable marketing website that fit the organizational rebrand and the product line additions.

Tech Stack


The front-end framework, Gatsby.js, was chosen for its exceptional performance. With Gatsby, Semgrep could leverage site generation, which delivers content and loads pages nearly instantaneously.

Additionally, it offers a seamless developer experience with a rich ecosystem of plugins and integrations, making it highly customizable and efficient for building dynamic, SEO-friendly websites


Storyblok was selected as the CMS of choice for Semgrep for several reasons:

  • Storyblok helps engage modern audiences more efficiently and effectively by unleashing content operations at every stage of the content lifecycle.
  • Storyblok’s Visual Editor speeds up content creation cycles and optimizes for both the developer and content editor experience.
  • Composable Components gives teams greater control and flexibility across all projects.
  • Achieving scalable content operations is a breeze with Storyblok’s central content hub, asset manager, and custom user roles and permissions.

Learn more about Webstacks' Storyblok services.


For hosting, our team employed Netlify for its seamless continuous deployment process, directly linking with your Git repositories to streamline updates and changes.

 It offers unparalleled speed and reliability, leveraging global CDN distribution to ensure your website loads quickly and reliably for users worldwide, enhancing user experience and satisfaction.

Netlify's serverless functions simplify back-end operations, allowing for scalable, efficient handling of dynamic content and interactions without the need for managing servers. Additionally, its integrated suite of developer tools and automatic HTTPS provides enhanced security and compliance

Product Pages

One of Semgrep’s primary initiatives following the website redesign was to build out pages for their growing product suite. Webstacks’ designers worked closely with the Semgrep product marketing team to gain a deeper understanding of each product’s capabilities and define how they should be presented.

Our goal was to create immersive experiences that gave website visitors a captivating view of the actual product.

Key design aspects that elevated product pages’ UX:

  • Static and animated product mockups
  • Widgets, buttons, and sliders that alter the elements displayed
  • Scrolling trust bars and customer testimonials

Demo Center

Webstacks also designed and developed a page that hosted interactive demos, giving users a step-by-step walkthrough of Semgrep’s “Code” and “Supply Chain” products. 

These self-guided product tours allow prospects to get an inside look at Semgrep’s offerings without having to book a meeting. Overall, these demos are highly effective at educating both the decision-makers and developers in target organizations.

The growth of the Semgrep site also required us to work with their team to develop a new structure for the navbar and its subcategories.

The updated design is better fit for Semgrep’s growing product line, as well as the expansion of content. The menu contains subtle slide-in animations, as well as icons and descriptions for each subpage.

Pricing Page

Expansion of Semgrep’s products required significant changes to the pricing page design. The new pricing model was split into 3 tiers.

The “Team” and “Enterprise” offerings feature checkboxes, which users can toggle between to add or remove Semgrep products to their pricing plan. 

This approach allowed Semgrep to preserve a minimalistic view, making their pricing more intuitive for users and increasing their likelihood of converting.

Webstacks also designed product feature tables to cleanly showcase the capabilities included in each tier. 

Pricing Page Callouts:

  • Tooltips that add valuable context without cluttering the UI.
  • Hover states on pricing cards and buttons that provide feedback.
  • FAQs that clear up common pricing-related queries.
  • Real-world social proof taken from X (Twitter).

Resource Hub

As website content began to take on varying formats, a resource hub was developed to serve as a centralized repository for blogs, webinars, events, and more.

Resource hubs provide comprehensive insights, guides, and solutions that cater to the needs of both existing customers and prospects. In today’s modern B2B/SaaS website landscape, they are becoming the standard of professional content marketing.

As Semgrep continues investing in content, the resource hub serves as a scalable foundation for adding new experiences that seamlessly integrate with the rest of the website.

This interconnected approach enhances user journeys, enabling visitors to effortlessly explore and discover more relevant content.

ROI Calculator

A powerful way to entice prospective buyers is by giving them a quantifiable view of how your product can save them money. This is where an ROI calculator comes in handy.

Our recommendation to Semgrep was to build an interactive ROI calculator to showcase the amount of savings Semgrep could generate in terms of coding bugs, working hours, and costs. The calculator utilizes toggles, a slider, and input fields, allowing users to generate their custom result.

Careers Page

Another major overhaul was done to the Semrep Careers page, which included many net-new components. An exceptional feature our devs added was embedding Semgrep’s open job positions via the Greenhouse API.

Marketing Collateral

In addition to shipping website designs, Webstacks also crafted visual assets for several marketing materials, including social media posts, paid media ads, event posters, webinar thumbnails, and t-shirts.

To further enable the Semgrep marketing team, our designers provided templates for social media, webinar, and event design assets. This way, Semgrep could edit and repurpose themselves and significantly increase their production time.

Webstacks’ design impact extended far beyond the website. Our team even got the opportunity to design a digital billboard that announced Semgrep’s Series C funding, which was featured on the NASDAQ Tower in Times Square!

Key Aspects of the Engagement

Scaling content marketing

Our efforts have enabled Semgrep to grow brand awareness and thought leadership through its marketing website. Now, their marketing team has the ability to autonomously produce content in a variety of formats.

Enablement for the Semgrep marketing team

Webstacks was able to bring autonomy to Semgrep through reusable components and a content editor-friendly CMS in Storyblok. This also laid the foundation for scaling content production. Our team provided workshops and in-depth tutorials to enable Semgrep to make content edits in Storyblok, as well as create new designs from templates.

Trust in our recommendations

Semgrep has welcomed Webstacks’ input when it comes to important design, development, and website strategy decisions. Their faith in our expertise allows for seamless coordination and communication. As a result, we’ve been able to provide task recommendations, and complete projects quicker.

Looking to start a website project? Talk to our website experts today!


Semgrep is a static analysis tool designed to streamline code security and quality by identifying bugs, vulnerabilities, and enforcing code standards swiftly and effectively.


San Francisco, CA



Company size

Enterprise (200+ employees)

Tech stack