JSX is basically just syntax sugar for:

    createElement(
        "div", {
            className: ["recipeTile", { lastRow: options.lastRow, lastColumn: options.lastColumn }],
            onclick: function () { showHideRecipe(recipe.name) }
        }, [
            createElement("img", { src: "./static/images/" + recipe.name + ".jpg" }),
            createElement("div", { className: "details" }, [
                createElement("div", { className: "name" }, capitalize(recipe.name)),
                createElement("div", { className: "ingredients", }, Object.keys(recipe.ingredients).map(function(ingredientName) {
                    return capitalize(ingredientName);
                }).join(", "))
            ])
        ]
    );

    function createElement(type, attributes, children) {
        var element = document.createElement(type);
    
        Object.keys(attributes).forEach(function(key) {
            if (key === "className") {
                classNames(attributes[key]).forEach(function (className) {
                    element.classList.add(className);
                });
            } else if (key.indexOf("on") === 0) {
                element.addEventListener(key.replace("on", ""), attributes[key], false);
            } else {
                element.setAttribute(key, attributes[key]);
            }
        });
    
        if (Array.isArray(children)) {
            children.forEach(function(child) {
                child && element.appendChild(child);
            });
        } else if (typeof children === "string") {
            element.textContent = children;
        } else if (children) {
            element.appendChild(children);
        }
    
        return element;
    }

Isn't svelte much more than that?