A snippet is actually just a QWeb view that gets injected in the Insert blocks bar, which is defined by a QWeb view itself. Follow these steps:

1. Add a file called views/snippets.xml, as follows:

<?xml version="1.0" encoding="UTF-8"?> 
<odoo> 

<!-- Assets for JS file added step 4 -->
<template id="assets_frontend" inherit_id="web.assets_frontend">
    <xpath expr="." position="inside">
        <script src="/my_library/static/src/js/snippets.js" type="text/JavaScript" />
    </xpath>
</template>

<!-- Step 2 and 3 comes here --> 
</odoo> 

2. Add a template for your snippet, as follows:

<template id="book_snippet">
    <section class="book_list">
        <div class="container">
            <h2>Latest books</h2>
            <table class="table book_snippet">
                <tr>
                    <th>Name</th>
                    <th>Release date</th>
                </tr>
            </table>
        </div>
    </section>
</template>

3. Inherit the snippet template and append the snippet and options, as follows:

<template id="book_snippets_options" inherit_id="website.snippets">
    <xpath expr="//div[@id='snippet_feature']/div[hasclass('o_panel_body')]" position="inside">
        <t t-snippet="my_library.book_snippet" 
          t-thumbnail="/my_library/static/description/icon.png"/>
    </xpath>
    <xpath expr="//div[@id='snippet_options']" position="inside">
            <!-- add snippet options here -->
    </xpath>
</template>

4. Add the snippet options in the inherited snippet template, as follows:

<div data-js="book_count" data-selector="section.book_list">
    <div class="dropdown-submenu">
        <a tabindex="-2" href="#" class="dropdown-item">
            <i class="fa fa-book"/> Number of books
        </a>
        <div class="dropdown-menu" role="menu">
            <a href="#" class="dropdown-item" data-select-count="3"> 3 </a>
            <a href="#" class="dropdown-item" data-select-count="5"> 5 </a>
            <a href="#" class="dropdown-item" data-select-count="10"> 10 </a>
            <a href="#" class="dropdown-item" data-select-count="15"> 15 </a>
        </div>
    </div>
</div>

<div data-selector=".book_snippet">
    <div class="dropdown-submenu">
        <a tabindex="-2" href="#" class="dropdown-item">
            <i class="fa fa-columns"/> Table Style
        </a>
        <div class="dropdown-menu" role="menu">
            <a href="#" class="dropdown-item" data-toggle-class="table-bordered">
                Bordered
            </a>
            <a href="#" class="dropdown-item" data-toggle-class="table-dark">
                Dark
            </a>
            <a href="#" class="dropdown-item" data-toggle-class="table-striped">
                Striped
            </a>
        </div>
    </div>
</div>

5. Add the new file, /my_library/static/src/js/snippets.js, and add JavaScript code to populate our snippet, as follows:

odoo.define('my_library.snippets', function (require) {
    "use strict";
    var rpc = require('web.rpc');
    var Animation = require('website.content.snippets.animation');
    var options = require('web_editor.snippets.options');

    // Add snippet option and animation JavaScript here

});

6. Add an option as follows to decide how many books we want to display in the snippet:

options.registry.book_count = options.Class.extend({
    selectCount: function (previewMode, value, $opt) {
        var table = this.$target.find('table');
        var oldClass = table.attr('class');
        var newTable = $('<table><tr><th>Name</th><th>Release date</th></tr></table>');
        newTable.attr('class', oldClass);
        newTable.attr('data-rows', value);
        table.replaceWith(newTable);
        this._refreshAnimations();
    }
});

7. Add an animation to fetch book data and display it in the page, as follows:

Animation.registry.book_snippet = Animation.Class.extend({
    selector: '.book_snippet',
    start: function () {
        var self = this;
        var rows = this.$el.data().rows || 5;
        this.$el.find('td').parents('tr').remove();
        rpc.query({
            model: 'library.book', method: 'search_read',
            domain: [], fields: ['name', 'date_release'],
            orderBy: [{name: 'date_release', asc: false}],
            limit: rows,
        }).then(function (data) {
            _.each(data, function (book) {
                self.$el.append(
                    $('<tr />').append(
                        $('<td />').text(book.name),
                        $('<td />').text(book.date_release)
                    ));
            });
        });
    },
});

After updating the module, you will be offered a new snippet called Latest books, which has an option to change the number of recently added books. We have also added the option to change the table design, which can be displayed when you click on the table.