eylenburg.github.io/os_familytree.htm at main · eylenburg/eylenburg.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE html>
<html lang="en">
<head>
<title>Operating Systems: Timeline and Family Tree</title>
<meta name="darkreader-lock">
<meta name="description" content="Operating Systems: Timeline and Family Tree">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<meta name="keywords" content="technology, operating systems, Linux distributions, Android ROMs, desktop environments, web browsers, instant messengers, cloud services, privacy, digital freedom, payments, cryptocurrencies, productivity software">
<meta name="author" content="Alphonse Eylenburg">
<link rel="stylesheet" href="style.css">
<style>
    .year-header {
        position: sticky;
        top: 0;
        background-color: white;
    }

    .timeline-table {
        color: black;
        display: flex;
        height: 30px;
        white-space: nowrap;
        margin-left: 10px;
    }

    .timeline-table div {
        flex: 1;
        text-align: center;
        border-right: 1px solid #ccc;
        line-height: 30px;
        background-color: #f0f0f0;
        font-size: 11px;
    }

    .timeline-table div:last-child {
        border-right: none;
        margin-right: 20px;
    }

    #toggleButton {
        margin: 10px 0;
        padding: 10px;
        border: none;
        border-radius: 5px;
        color: white;
        cursor: pointer;
    }

    #toggleButton.active {
        background-color: lightcoral;
    }

    #toggleButton.inactive {
        background-color: lightgreen;
    }
</style>
</head>
<body>

<script src="top.js"></script>
<header>
<p><a href="index.html">&larr; Sitemap</a></p>
</header>

<h1>Operating Systems: Timeline and Family Tree</h1>
<h2>Includes about 1,400 operating systems so far</h2>
<p style="color: red; font-size: small;">Last updated: March 2026</p>
<p>In this post you'll find a family tree and timeline of operating systems. I have tried to include all operating systems, no matter how old or obscure. Of course, a complete list is virtually impossible, as there is no way to catalogue all the tiny hobby and embedded systems that may exist somewhere.<br /><br />
Please also note that I only included a few selected Linux/BSD/Solaris distributions (it is arguable whether these should count as an OS on their own or not).<br /><br />
Currently, the family tree includes around 1,400 different operating systems (including some renamings). Tip: use Ctrl+F (Cmd+F on Mac) to search for a system.</p>

<p><strong>There are some missing system and some corrections that are not included in the graphic below yet. <a href="https://github.com/eylenburg/eylenburg.github.io/issues/80" target"_blank">Please see here for the issue tracker.</a></strong>
<br />If you'd like to help out, you can <a href="https://github.com/eylenburg/os-family-tree">contribute here</a>.</p>

<p>Colour guide:<br />

<table>
<tr><td></td><td>Alive</td><td>Dead</td></tr>
<tr><td>Microsoft</td><td style="background-color: #008B8B;"></td><td style="background-color: #85d3d3;">
<tr><td>Apple</td><td style="background-color: #8b008b;"></td><td style="background-color: #ae80ae;">
<tr><td>Unix-like</td><td style="background-color: #8B0000;"></td><td style="background-color: #FF8585;">
<tr><td>RSX/VMS-like</td><td style="background-color: #008000;"></td><td style="background-color: #9dd19d;">
<tr><td>DOS-like</td><td style="background-color: #0000CD;"></td><td style="background-color: #b0b0eb;">
<tr><td>AmigaOS-like</td><td style="background-color: #FF8C00;"></td><td style="background-color: #ffd198;">
<tr><td>Mainframe systems</td><td style="background-color: #8B4513;"></td><td style="background-color: #c09e86;">
<tr><td>L4 microkernel family</td><td style="background-color: #FFD700;"></td><td style="background-color: #ffe975;">
<tr><td>OSEK-compliant</td><td style="background-color: #FF00FF;"></td><td style="background-color: #ffb6ff;">
<tr><td>Others</td><td style="background-color: #000;"></td><td style="background-color: #AAA;">
</table>


<button id="toggleButton" class="active">Disable sticky timeline</button>

<br>

<div class="year-header">
    <div class="timeline-table" id="timelineTable"></div>
</div>

<object type="image/svg+xml" data="os-family-tree/Eylenburg_Operating_System_Timeline_Family_Tree.svg" id="svgGraphic"></object>

<p>
<i>Big Update August 2021: Thank you for everyone e-mailing me with suggestions after this webpage got posted on Hackernews by someone. I have added most of the suggestions, such as missing operating systems and a few mistakes.</i><br />
<i>Big Update February 2023: I added another 200 or so operating systems and made some corrections.</i><br />
<i>Update July 2024: I added another 30-ish operating systems and made some corrections and updates.<br />
Update December 2024: I added another 25-ish operating systems and made some corrections and updates.
<br />Update January 2025: And some more.
<br />Update June 2025: Added more and fixed some errors thanks to Carlos834777
<br />Update December 2025: Some corrections and additions.
<br />Update December 2025: Added another almost 100 OS from the issue tracker.
</p>


<script src="bottom.js "></script>
<script>
    // Toggle button functionality
    const toggleButton = document.getElementById('toggleButton');
    const yearHeader = document.querySelector('.year-header');

    toggleButton.addEventListener('click', () => {
        if (toggleButton.classList.contains('active')) {
            yearHeader.style.display = 'none';
            toggleButton.textContent = 'Enable sticky timeline';
            toggleButton.classList.remove('active');
            toggleButton.classList.add('inactive');
        } else {
            yearHeader.style.display = 'block';
            toggleButton.textContent = 'Disable sticky timeline';
            toggleButton.classList.remove('inactive');
            toggleButton.classList.add('active');
        }
    });

    // Dynamically adjust the timeline width to match the SVG width
    function renderTimeline() {
        const svgGraphic = document.getElementById('svgGraphic');
        const timelineTable = document.getElementById('timelineTable');
        const startYear = 1951;
        const endYear = 2100;
        const cellWidth = 30;

        svgGraphic.addEventListener('load', () => {
            const svgWidth = svgGraphic.getBoundingClientRect().width;

            // Ensure the timeline container matches the SVG width
            timelineTable.style.width = `${svgWidth}px`;

            // Clear previous timeline content
            timelineTable.innerHTML = '';

            // Calculate the number of years that fit within the SVG width
            const yearsToShow = Math.floor(svgWidth / cellWidth);

            for (let year = startYear; year < startYear + yearsToShow; year++) {
                const cell = document.createElement('div');
                cell.textContent = year;
                timelineTable.appendChild(cell);
            }
        });
    }

    // Call the function when the page loads
    renderTimeline();

    // Optional: Re-render the timeline on window resize
    window.addEventListener('resize', renderTimeline);
</script>
</body>
</html>