jakelazaroff.com
a proof of concept realtime collaborative text editor using atproto as a sync server
jake.tngl.io/y-pds/
Improve styles a bit
author
Jake Lazaroff
date
(Mar 28, 2026, 11:18 AM -0400)
commit
dde54f4d
dde54f4da720609119017d16911674d3a83c7f8d
parent
0dcb3fda
0dcb3fda8aa3afbe823201235e54f9fa5f46ef95
+81
-34
+19
-7
app.js
+19
-7
app.js
···
103
103
104
104
render() {
105
105
return html`
106
-
<form onSubmit=${e => this.onSubmit(e)}>
107
-
<actor-typeahead>
108
-
<input name="handle" />
109
-
</actor-typeahead>
110
-
<button>log in</button>
111
-
<p>Log in with your <a href="https://internethandle.org">Internet handle</a>.</p>
112
-
</form>
106
+
<div class="login">
107
+
<h1>Yjs via PDS</h1>
108
+
<p>
109
+
A proof-of-concept collaborative text editor,<br />built with${" "}
110
+
<a href="https://yjs.dev">Yjs</a> on top of <a href="https://atproto.com">Atproto</a>.
111
+
</p>
112
+
<form class="login-form" onSubmit=${e => this.onSubmit(e)}>
113
+
<label>
114
+
<span>Handle</span>
115
+
<actor-typeahead>
116
+
<input name="handle" placeholder="example.bsky.social" />
117
+
</actor-typeahead>
118
+
</label>
119
+
<button>Log in</button>
120
+
</form>
121
+
<p class="login-blurb">
122
+
Log in with your <a href="https://internethandle.org">Internet handle</a>.
123
+
</p>
124
+
</div>
113
125
`;
114
126
}
115
127
}
+4
-27
reset.css
+4
-27
reset.css
···
34
34
overflow-wrap: break-word;
35
35
}
36
36
37
-
:where(ol, ul) {
38
-
list-style: none;
39
-
}
40
-
41
-
:not([class]) {
42
-
&:where(h1, h2, h3, h4, h5, h6) {
43
-
margin-block: 0.75em;
44
-
margin-trim: block;
45
-
line-height: 1.25;
46
-
text-wrap: balance;
47
-
letter-spacing: -0.05ch;
48
-
}
49
-
50
-
&:where(p, ol, ul) {
51
-
margin-block: 1em;
52
-
margin-trim: block;
53
-
}
54
-
55
-
&:where(ol, ul) {
56
-
padding-inline-start: 1.5em;
57
-
list-style: revert;
58
-
}
59
-
60
-
&:where(li) {
61
-
margin-block: 0.5em;
62
-
margin-trim: block;
63
-
}
37
+
&:where(h1, h2, h3, h4, h5, h6) {
38
+
line-height: 1.25;
39
+
text-wrap: balance;
40
+
letter-spacing: -0.05ch;
64
41
}
65
42
}
+58
style.css
+58
style.css
···
5
5
@import url("https://esm.sh/prosemirror-example-setup/style/style.css");
6
6
@import url("https://esm.sh/prosemirror-gapcursor/style/gapcursor.css");
7
7
8
+
input,
9
+
select,
10
+
textarea {
11
+
width: 100%;
12
+
padding: 0.4rem 0.5rem;
13
+
border: 1px solid #ccc;
14
+
border-radius: 4px;
15
+
font-size: 0.875rem;
16
+
background: #fff;
17
+
transition: border-color 0.15s;
18
+
19
+
&:focus {
20
+
outline-offset: 1px;
21
+
outline: 2px solid rgba(from blue r g b / 0.5);
22
+
}
23
+
}
24
+
25
+
button {
26
+
padding: 0.4rem 0.75rem;
27
+
border: 1px solid #ccc;
28
+
border-radius: 4px;
29
+
background: #fff;
30
+
font-size: 0.875rem;
31
+
cursor: pointer;
32
+
transition: background 0.15s;
33
+
34
+
&:hover {
35
+
background: #f5f5f5;
36
+
}
37
+
38
+
&:active {
39
+
background: #eee;
40
+
}
41
+
}
42
+
43
+
label {
44
+
font-size: 0.75rem;
45
+
}
46
+
8
47
html,
9
48
body {
10
49
height: 100%;
···
34
73
flex: 1;
35
74
display: flex;
36
75
flex-direction: column;
76
+
}
77
+
78
+
.login {
79
+
margin: auto;
80
+
text-align: center;
81
+
display: flex;
82
+
flex-direction: column;
83
+
gap: 16px;
84
+
}
85
+
86
+
.login-form {
87
+
display: flex;
88
+
flex-direction: column;
89
+
gap: 8px;
90
+
text-align: left;
91
+
}
92
+
93
+
.login-blurb {
94
+
font-size: 0.75rem;
37
95
}
38
96
39
97
.loading {