Menu Close



Time line for the CSS evolution and history of tooling, libraries, frameworks and so on


  • Zero dependencies
  • dark mode support 🌓
  • reverse timeline is supported
  • sort timeline by default
  • support filter using tags and year
  • JavaScript code linting is done using eslint
  • Has .editorconfig which helps developers define and maintain consistent coding styles between different editors and IDEs.


npm i tline
# Or
yarn add tline

Before starting

the event (data) should be similar to:

all properties are required expect url is optional

  name: 'Bootstrap',
  url: '',
  description: 'The most popular HTML, CSS, and JS library in the world.',
  createdAt: new Date(2011, 7, 19),
  tags: ['frameworks'],

Usage 🚀

import Tline from 'Tline'; const events = [] // your events as previously structured <Tline timeline={events} />

Available props

property type default description
tag string all filter timeline by events tag
year number 0 filter timeline by events year
reversed boolean false determine if timeline is reversed or not default is sorted by date
darkmode boolean false activate darkmode


const [setting, setSetting] = useState({ tag: 'all', year: 0, reversed: false, darkmode: false, timeline: data, }); return ( <div className={`app ${setting.darkmode ? 'darkmode' : ''}`}> <Tline {...setting} /> </div> );

Related Work 🌠

  • tube-cli – A package for downloading youtube videos & playlists
  • tube-info – A package for getting youtube videos & playlists info
  • js-pmq – A simple NPM package to get popular movie quotes.

Data sources

Contribution 🤝

  1. Fork it!
  2. Create your feature branch: git checkout -b feature-name
  3. Commit your changes: git commit -am 'Some commit message'
  4. Push to the branch: git push origin feature-name
  5. Submit a pull request 😉😉

License 📜

MIT © Mohammed Taysser

View Source Code
Posted in Development