Professional Content Management

Free and open source, TYPO3 CMS is the most widely used enterprise-level CMS.

Test TYPO3 now:

TYPO3 live demo

Inspire people to share

Offer your skills and contribute to the project. The community is growing and does more than just coding. 

A Community Effort

TYPO3 CMS is an Open Source project managed by the TYPO3 Association.

The Project

Do you have a question?

Ask the community or a professional partner.

Visitors From the Symfony World Contribute To TYPO3 Documentation Search Frontend

Categories: Development, Documentation, Community Created by Mathias Bolt Lesniak
When the much-improved functionality at docs.typo3.org was implemented, it still missed a nice-looking frontend. That work was completed by two French companies from the Symfony world. Here’s their story.

You may already have read the article about the improvements to the search functionality at docs.typo3.org. However, the story of the look and feel hasn’t yet been told. It is a result of a collaboration between the companies JoliCode and Premier Octet. I talked with Damien Alexandre from JoliCode about how it all came about.

In the Symfony Ecosystem Since the Start

“We are two French, human-sized companies working together,” Damien explains. “JoliCode does the backend and Premier Octet the frontend. We are strong believers in open source and we contribute on a regular basis.” Together, the companies work with technologies like Symfony, React, Rust, Next.js, and Elasticsearch.

“We are fossils in the Symfony ecosystem,” says Damien. “Some of us were working with it before the 1.0 release. We got very excited about Symfony very quickly. At that time, we really missed a strong, opinionated framework to get projects properly industrialized. We felt a huge quality boost — and we never went back.” Now they are Symfony core contributors and sponsors, and consider themselves experts in the framework.

Illustration of a person with long dark hair and a beard, wearing yellow sunglasses and a yellow hoodie. They are making a rock hand gesture and wearing a T-shirt with a unicorn and the words Heavy Metal.
Damien Alexandre loves that TYPO3 uses Doctrine and many Symfony 7 components.

TYPO3 is Built on Great Foundations

TYPO3 was a new experience for them, but Damien was excited about the opportunity. “I've never had the opportunity to work on a TYPO3 project, so it's really interesting for us to put a foot in that universe. I love that TYPO3 uses Doctrine and many Symfony 7 components. We knew right from the start that it's built on great foundations.”

The two companies got in touch with leader of the TYPO3 Documentation Team, Lina Wolf, because she requested reviews and was looking for someone to finish the frontend part of the search suggestion feature for the TYPO3 documentation.

“Helping an open source project in need is very satisfying,” says Damien, “and we felt confident it was within our skill set. So we reached an agreement to finish the full feature for a small, fixed fee.” The €3000 from the Documentation Team’s budget ended up covering about half the cost, with JoliCode and Premier Octet donating the rest to the TYPO3 project.

Shared Office, Shared Work

Damien did the work together with Colin Regourd from Premier Octet. The two share an office, “so it was really convenient for us,” Damien explains.

Together, they worked within two repositories in the TYPO3 Documentation’s GitHub organization: t3docs-search-indexer for the API and Elasticsearch suggestions and render-guides for the actual frontend.

“The Elasticsearch part was already very good, so most of the work was on the frontend side,” says Damien. “With some help from Lina Wolf, we managed to get those projects running locally, and then it was all a matter of understanding how they interact with each other.”

A person with a bald head and beard, wearing a denim jacket, smiles at the camera outdoors. A person in sunglasses and a building with a statue are in the background.
Colin Regourd shares an office with Damien. Together they collaborated on the project.

Conservative and Non-Intrusive, With Good User Experience

Colin and Damien like the way the TYPO3 documentation is built. “Having only static HTML to host online is a must,” Damien says. At the same time, it also made the development process take a bit longer: “When you change something you have to rebuild the documentation.”

The final implementation adds a React component for the Search panel. Damien explains that they had four key motivations with their work:

  • Be as conservative as possible with dependencies. (“We added React, react-dom and lodash.debounce, that's all,” says Damien.)
  • Change nothing else on the page.
  • Be as non-intrusive as possible.
  • Provide a good user experience.

Try Out the Search at docs.typo3.org

Additional contributors for this article
  • Proofreader : Felicity Brand
  • Content Publisher : Mathias Bolt Lesniak

Related News

Latest news

Show more