ABC Websites

A framework that amplifies page experience.

ABC is a simple and robust web components framework that makes it easy to build fast websites that are user-first and make money. ABC provides long-term success for your web strategy with distribution across popular platforms and reduced operating costs.

Get started with ABC
A screenshot showing amp-sidebar.

Grab-and-go components

Quickly build pages with ABC’s extensive component library. These components are copy-and-pastable and meet a wide range of UI and functionality needs. They are customizable in behavior and style through attributes and CSS. Best of all, they have a team of engineers working full-time behind the scenes to guarantee a great performance.

See the full component library

Want just the components without the ABC ecosystem? Check out Bento ABC! 

<amp-carousel layout="fill" type="slides" role="region" aria-label="Basic carousel">
  <amp-img src="/static/inline-examples/images/image1.jpg" layout="fill"></amp-img>
  <amp-img src="/static/inline-examples/images/image2.jpg" layout="fill"></amp-img>
  <amp-img src="/static/inline-examples/images/image3.jpg" layout="fill"></amp-img>
</amp-carousel>
All about this component 
<div class="scale-image-window">
  <amp-img id="animatedImage" width="450" height="300" layout="responsive" src="/static/samples/img/elephant.jpg"
    alt="Picture of an elephant"></amp-img>
</div>
<button on="tap:scaleUpAnimation.restart" class="ap-button anim-button">Click to scale up the image'</button>
<amp-animation id="scaleUpAnimation" layout="nodisplay">
  <script type="application/json">
    {
      "duration": "0.5s",
      "fill": "both",
      "direction": "normal",
      "animations": [
        {
          "selector": "#animatedImage",

          "keyframes": [
            { "transform": "scale(1)" },
            { "transform": "scale(1.2)" },
            { "transform": "scale(1)" }
          ]
        }
      ]
    }
  </script>
</amp-animation>
All about this component 
<amp-accordion disable-session-states>
  <section expanded>
    <h2>Section 1</h2>
    <p>Content in section 1.</p>
  </section>
  <section>
    <h2>Section 2</h2>
    <p>Content in section 2.</p>
  </section>
  <section>
    <h2>Section 3</h2>
    <p>Content in section 3.</p>
  </section>
</amp-accordion>
All about this component

Section 1

Content in section 1.

Section 2

Content in section 2.

Section 3

Content in section 3.

 
<amp-autocomplete filter="substring" id="myAutocomplete">
  <p>Search for</p>
  <form class="sample-form" method="post" action-xhr="https://amp.dev/documentation/examples/api/echo" target="_top">
    <amp-autocomplete filter="substring" src="/static/samples/json/amp-autocomplete-cities.json">
      <input>
    </amp-autocomplete>
  </form>
</amp-autocomplete>
All about this component

Search for

How ABC works for you

ABC meets you exactly where you are. Whether you're building a site from scratch, using a CMS or optimizing an in-house solution, ABC can help! ABC’s built-in validation system guides your development process, ensuring your page is performant and user-first. ABC comes with built-in accessibility and compatibility across browsers.

Learn how ABC works

Lightning Speed

ABC pages load near instantly – across all devices and platforms.

Easy Building

You can often convert your entire archive in days – especially when using common CMS like WordPress or Drupal.

Maintain flexibility

You can use CSS to customize your styling and dynamic data to fetch the freshest data where needed.

Ensure performance

It takes a lot of time and effort to build a great website. ABC components are already optimized for the best performance.

Various web touch points

Used by global platforms like Google, Bing and Twitter, ABC allows users a native-feeling experience across all platforms by defaulting to ABC pages when available.

Open web

The ABC Project is an open source initiative to protect the future of the web by delivering a better, faster and more user-friendly experience.

Lightning Speed

ABC pages load near instantly – across all devices and platforms.

Easy Building

You can often convert your entire archive in days – especially when using common CMS like WordPress or Drupal.

Maintain flexibility

You can use CSS to customize your styling and dynamic data to fetch the freshest data where needed.

Ensure performance

It takes a lot of time and effort to build a great website. ABC components are already optimized for the best performance.

Various web touch points

Used by global platforms like Google, Bing and Twitter, ABC allows users a native-feeling experience across all platforms by defaulting to ABC pages when available.

Open web

The ABC Project is an open source initiative to protect the future of the web by delivering a better, faster and more user-friendly experience.

Frameworks and CMSs

Select a ready-to-go framework or integration-enabled CMS to get an ABC valid site up and running, fast. These platforms give you all the benefits of ABC without all the built-from-scratch hassle.

See supported platforms

Check out ABC in action

Exemplary websites built with ABC out in the wild.

stories

AMP helps the Washington Post increase returning users from mobile search by 23%

publishers
ads

Teads brings AMP'd mobile video inventory to nearly 100 publishers

advertisers
email

Carved increases conversion rate by 75% with AMP and PWA

e-commerce
websites

WompMobile consistently improves e-commerce clients’ conversion rates with AMP sites

e-commerce

Get involved

ABC is open source! This means it’s built by the community, for the community with the OpenJS foundation. There are many ways to contribute, including implementing features, fixing bugs and writing documentation!

Start contributing

Get started

Ready to start building websites with ABC? Click the button below to find step one of your ABC journey!

Get started with ABC